Mẫu 3D Cube Banner cực cool với CSS3 và jQuery
Đăng nhập | Đăng ký 

Học lập trình | Kiếm tiền Online | SEO website

Chia sẻ kiến thức IT

loading
Trang chủ / Lập trình / Javascript, Jquery / Mẫu 3D Cube Banner cực cool với CSS3 và jQuery

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

by


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.

3d-cube-banner-using-css3-animations-and-jquery

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;
	width: 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;
	width: 320px;
}
.example1 .cube div {
	height: 320px;
	width: 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: ,

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

Xin chào, diendanhocweb.com là nơi mình sẽ chia sẻ những thủ thuật, kiến thức về website mà mình tìm hiểu được. Hy vọng, nó sẽ giúp ích cho mọi người.

Tìm kiếm phổ biến

Giới thiệu

Diendanhocweb.com là trang blog chia sẻ kiến thức tâm đắc của nhiều lập trình viên Việt Nam đến từ các trường đại học TOP đầu về IT. Nơi chia sẻ thủ thuật thiết kế web – Sửa lỗi website -  thủ thuật SEO – thủ thuật Lập trình – Đồ họa – Hosting/Server - Kiến tiền Online và các bài học trực tuyến qua Video. Mỗi ngày chúng tôi luôn dành thời gian chia sẻ kiến thức trên cộng đồng. Chúng tôi hy vọng những chia sẻ kiến thức của mình sẽ giúp cho bạn đọc có thể tiếp cận được các thông tin về học lập trình Website, thiết kế Website, kiếm tiền Online và SEO Website. Nếu bạn mong muốn làm tác giả cho 1 khoá học nào về lập trình vui lòng gửi vào email : contact@diendanhocweb.com

Liên kết nhanh

Facebook

Thiết kế website chuyên nghiệp, chuẩn SEO, giá tốt - Igitech.vn
Liên hệ với chúng tôi