Mẫu 3D Cube Banner cực cool với CSS3 và jQuery

Hôm nay mình sẽ chia sẻ cho các bạn một mẫu banner với hiệu ứng rất mềm mại và đủ sức để tạo ấn tượng với khách hàng. Với mẫu này, các bạn có thể áp dụng để tạo quảng cáo cho website hay blog của mình.

Xem Demo | Download

HTML

Đầu tiên, chúng ta sẽ tạo khung chuẩn html như sau :

<div class="cube-wrap example1">
<div id="cube" class="cube">
<div class="cube-front">
            <a href="#">
            <img class="step1-img1" src="images/step1-img1.png" alt="" />
            <img class="step1-img2" src="images/step1-img2.png" alt="" />
            </a>
</div>
<div class="cube-back">
            <a href="#">
            <img class="step3-img1" src="images/step3-img1.png" alt="" />
            <img class="step3-img2" src="images/step3-img2.png" alt="" />    
            </a>
 </div>

<div class="cube-top">
            <a href="#">
            <img class="step4-img1" src="images/step4-img1.png" alt="" />
            <img class="step4-img2" src="images/step4-img2.png" alt="" />
            <img class="step4-img3" src="images/step4-img3.png" alt="" />
            <img class="step4-img4" src="images/step4-img4.png" alt="" />
            </a>    
 </div>

<div class="cube-bottom">                                
            <a href="#">
            <img class="step2-img1" src="images/step2-img1.png" alt="" />
            <img class="step2-img2" src="images/step2-img2.png" alt="" />        
            </a>    
  </div>

<div class="cube-left"> </div>
<div class="cube-right"> </div>
</div>
</div>

CSS

Đây là phần quan trọng nhất, chúng ta sẽ tạo hiệu ứng chuyển cảnh cũng như định dạng cho banner. Trước hết là phần định dạng chung cho phần tạo banner.

/** global **/
.cube-wrap {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	transform: scale(0.8);
	-ms-transform: scale(0.8);
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-o-transform: scale(0.8); 
}
.cube {
	position: relative;
	margin: 0 auto;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: transform 1s;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	-ms-transition: -ms-transform 1s;
}
.cube div {
	position: absolute;
	text-align: center;
	overflow: hidden;
}
.cube img {
	display: none;
	margin-left: auto;
	margin-right: auto;
}
.cube a {
	position: absolute;
	awidth: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

Kế đến là các hiệu ứng chuyển cảnh.

/** animations **/
.slideLeft {
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		
	visibility: visible !important;	
}
@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}
@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
.slideRight {
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		
	visibility: visible !important;	
}
@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}
@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
.fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	visibility: visible !important;	
}
@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}
@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}
.slideDown {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	visibility: visible !important;						
}
@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}
@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}
.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;			
}
@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}
@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

Kích thước banner.

.example1 .cube {
	height: 320px;
	awidth: 320px;
}
.example1 .cube div {
	height: 320px;
	awidth: 320px;
}

Rotation effect:

.example1 .cube.step1 {
	transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
}
.example1 .cube.step2 {
	transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-webkit-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
}
.example1 .cube.step3 {
	transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg)
	-o-transform: rotateX(180deg);
}
.example1 .cube.step4 {
	transform: rotateX(270deg);
	-moz-transform: rotateX(270deg);
	-webkit-transform: rotateX(270deg);
	-ms-transform: rotateX(270deg);
	-o-transform: rotateX(270deg);
}

Sau đó là chiều quay của banner :

.example1 .cube-front {
	transform: rotateY(0deg) translateZ(160px);
	-moz-transform: rotateY(0deg) translateZ(160px);
	-webkit-transform: rotateY(0deg) translateZ(160px);
	-o-transform: rotateY(0deg) translateZ(160px);
	-ms-transform: rotateY(0deg) translateZ(160px);
	background-color: #CC7473;
}
.example1 .cube-back {
	transform: rotateX(-180deg) translateZ(160px);
	-moz-transform: rotateX(-180deg) translateZ(160px);
	-webkit-transform: rotateX(-180deg) translateZ(160px);
	-o-transform: rotateX(-180deg) translateZ(160px);
	-ms-transform: rotateX(-180deg) translateZ(160px);
	background-color: #9FB3D4;
}
.example1 .cube-right {
	transform: rotateY(90deg) translateZ(160px);
	-moz-transform: rotateY(90deg) translateZ(160px);
	-webkit-transform: rotateY(90deg) translateZ(160px);
	-o-transform: rotateY(90deg) translateZ(160px);
	-ms-transform: rotateY(90deg) translateZ(160px);
	background-color: blue;
	right: 0;
}
.example1 .cube-left {
	transform: rotateY(-90deg) translateZ(160px);
	-moz-transform: rotateY(-90deg) translateZ(160px);
	-webkit-transform: rotateY(-90deg) translateZ(160px);
	-o-transform: rotateY(-90deg) translateZ(160px);
	-ms-transform: rotateY(-90deg) translateZ(160px);
	background-color: blue;
}
.example1 .cube-top {
	transform: rotateX(90deg) translateZ(160px);
	-moz-transform: rotateX(90deg) translateZ(160px);
	-webkit-transform: rotateX(90deg) translateZ(160px);
	-o-transform: rotateX(90deg) translateZ(160px);
	-ms-transform: rotateX(90deg) translateZ(160px);
	background-color: #DBD05C;
}
.example1 .cube-bottom {
	transform: rotateX(-90deg) translateZ(160px);
	-moz-transform: rotateX(-90deg) translateZ(160px);
	-webkit-transform: rotateX(-90deg) translateZ(160px);
	-o-transform: rotateX(-90deg) translateZ(160px);
	-ms-transform: rotateX(-90deg) translateZ(160px);
	background-color: #88C58A;
}

Ví trí đặt hình.

.example1 .cube .step1-img1 {
	margin-top: 126px;
	margin-bottom: 16px;
}
.example1 .cube .step2-img1 {
	position: absolute;
	top: 71px;
	left: 135px;
}
.example1 .cube .step2-img2 {
	position: absolute;
	top: 165px;
	left: 88px;
}
.example1 .cube .step3-img1 {
	margin-top: 100px;
	margin-bottom: 13px;
}
.example1 .cube .step3-img2 {
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.example1 .cube .step4-img1 {
	position: absolute;
	left: 33px;
	top: 72px;
}
.example1 .cube .step4-img2 {
	position: absolute;
	left: 154px;
	top: 126px;
}
.example1 .cube .step4-img3 {
	position: absolute;
	left: 16px;
	top: 150px;
}
.example1 .cube .step4-img4 {
	position: absolute;
	left: 97px;
	bottom: 72px;
}

jQuery

Cuối cùng là các bạn cần có thêm đoạn script sau để điều khiển hiệu ứng.

$(document).ready(function() {
	var step = 2;
	$('.cube').addClass('step1');
	$('.step1-img1').addClass('slideRight').css('display','block');
	$('.step1-img2').addClass('slideLeft').css('display','block');
	setInterval(function(){
		if (step == 5) {
			step = 1;
			$('.cube').removeClass('step4');
		}
		if (step == 1) {
			setTimeout(function() {
				$('.step1-img1').addClass('slideRight').css('display','block');
				$('.step1-img2').addClass('slideLeft').css('display','block');
			}, 1000);
			setTimeout(function() {
				$('.step2-img1').removeClass('slideDown').css('display','none');
				$('.step2-img2').removeClass('fadeIn').css('display','none');
			}, 2000);
		}
		if (step == 2) {
			setTimeout(function() {
				$('.step2-img2').addClass('fadeIn').css('display','block');
			}, 500);
			setTimeout(function() {
				$('.step2-img1').addClass('slideDown').css('display','block');
			}, 2000);
			$('.step3-img1').removeClass('fadeIn').css('display','none');
			$('.step3-img2').removeClass('slideUp').css('display','none');
		}
		if (step == 3) {
			setTimeout(function() {
				$('.step3-img1').addClass('fadeIn').css('display','block');
			}, 500);
			setTimeout(function() {
				$('.step3-img2').addClass('slideUp').css('display','block');
			}, 2000);
			$('.step4-img1').removeClass('slideLeft').css('display','none');
			$('.step4-img2').removeClass('fadeIn').css('display','none');
			$('.step4-img3').removeClass('slideRight').css('display','none');
			$('.step4-img4').removeClass('slideUp').css('display','none');
		}
		if (step == 4) {
			setTimeout(function() {
				$('.step4-img1').addClass('slideLeft').css('display','block');
				$('.step4-img2').addClass('fadeIn').css('display','block');
				$('.step4-img3').addClass('slideRight').css('display','block');
			}, 500);
			setTimeout(function() {
				$('.step4-img4').addClass('slideUp').css('display','block');
			}, 2000);
			$('.step1-img1').removeClass('slideRight').css('display','none');
			$('.step1-img2').removeClass('slideLeft').css('display','none');
		}
		$('.cube').addClass('step'+step).removeClass('step'+(step-1));
		step++;
	}, 4000);
});

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster