Grid Animation Effects với jQuery

Xem: 653    Tải: 3   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

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

1 MEGA [megacode]grid-animation-effects-voi-jquery.rar (285.10 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]grid-animation-effects-voi-jquery.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ẽ giới thiệu cho các bạn một ví dụ đơn giản và nhỏ trong việc sử dụng jQuery .delay(), jQuery easing plugin, và CSS3 transforms để tạo hiệu ứng động cho các ảnh thumbnails trong một grid.

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ẽ giới thiệu cho các bạn một ví dụ đơn giản và nhỏ trong việc sử dụng jQuery .delay(), jQuery easing plugin, và CSS3 transforms để tạo hiệu ứng động cho các ảnh thumbnails trong một grid.

HTML

Chúng ta chỉ cần những phần tử html như bên dưới để tạo hiệu ứng , đồng thời chèn khai báo thư viện jQuery và plugin jquery.easing.min.js.

<!-- a simple grid and an animate button -->
<div class="grid"></div>
<span class="animate">Animate</span>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- jQuery easing plugin -->
<script src="jquery.easing.min.js" type="text/javascript"></script>

CSS

Kế tiếp là chúng ta sẽ tiến hành định dạng một vài câu lệnh CSS cho hiệu ứng :

/*Montserrat font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
body {text-align: center; overflow: hidden;}
 
.grid {
    width: 600px; height: 300px; margin: 100px auto 50px auto;
    perspective: 500px; /*For 3d*/
}
.grid img {width: 60px; height: 60px; display: block; float: left;}
 
.animate {
    font: 12px Montserrat; text-transform: uppercase;
    background: rgb(0, 100, 0); color: white;
    padding: 10px 20px; border-radius: 5px;
    cursor: pointer;
}
.animate:hover {background: rgb(0, 75, 0);}

jQuery

Và đây chính là trái tim của hiệu ứng mà mình muốn giới thiệu cho các bạn,  mỗi một câu lệnh đều có chú thích rõ ràng :

<script type="text/javascript">
//Creating 50 thumbnails inside .grid
//the images are stored on the server serially. So we can use a loop to generate the HTML.
var images = "", count = 50;
for(var i = 1; i <= count; i++)
    images += '<img src="uifaces/'+i+'.jpg" />';
     
//appending the images to .grid
$(".grid").append(images);
 
var d = 0; //delay
var ry, tz, s; //transform params
 
//animation time
$(".animate").on("click", function(){
    //fading out the thumbnails with style
    $("img").each(function(){
        d = Math.random()*1000; //1ms to 1000ms delay
        $(this).delay(d).animate({opacity: 0}, {
            //while the thumbnails are fading out, we will use the step function to apply some transforms. variable n will give the current opacity in the animation.
            step: function(n){
                s = 1-n; //scale - will animate from 0 to 1
                $(this).css("transform", "scale("+s+")");
            },
            duration: 1000,
        })
    }).promise().done(function(){
        //after *promising* and *doing* the fadeout animation we will bring the images back
        storm();
    })
})
//bringing back the images with style
function storm()
{
    $("img").each(function(){
        d = Math.random()*1000;
        $(this).delay(d).animate({opacity: 1}, {
            step: function(n){
                //rotating the images on the Y axis from 360deg to 0deg
                ry = (1-n)*360;
                //translating the images from 1000px to 0px
                tz = (1-n)*1000;
                //applying the transformation
                $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
            },
            duration: 3000,
            //some easing fun. Comes from the jquery easing plugin.
            easing: 'easeOutQuint',
        })
    })
}
</script>

Mình mong là hiệu ứng mà mình giới thiệu trong bài viết này sẽ giúp các bạn có thêm nhiều lựa chọn để áp dụng cho chính website hay blog của mình.

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

Tags: animate , jQuery

Grid Animation Effects với jQuery

Grid Animation Effects với jQuery Đăng ngày 21-08-2014  Hôm nay mình sẽ giới thiệu cho các bạn một ví dụ đơn giản và nhỏ trong việc sử dụng jQuery .delay(), jQuery easing plugin, và CSS3 transforms để tạo hiệu ứng động cho các ảnh thumbnails trong một grid. 5/10 653

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