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.
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);
});