Hướng dẫn viết mẫu 3D Cube Banner cực cool với CSS3 và jQuery

Xem: 214    Tải: 0   Thảo luận: 0   Mục: WordPress template   Lĩnh vực: Khác

9 điểm   ( 2 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-viet-mau-3d-cube-banner.rar (54.63 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-viet-mau-3d-cube-banner.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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.

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

Hướng dẫn viết mẫu 3D Cube Banner cực cool với CSS3 và jQuery

Hướng dẫn viết mẫu 3D Cube Banner cực cool với CSS3 và jQuery Đăng ngày 20-09-2016  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. 4.5/10 214

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn