Banner 3D Cube làm bằng CSS3 và jQuery
Hôm nay mình sẽ chia sẻ cho các bạn một mẫu Banner 3D làm bằng CSS3 và jQuery 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.

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 !