Khanh Blogger

Khanh Blogger

Tạo hiệu ứng động (Animation) khi cuộn chuột tới cho Blogspot

Mọi người thường sử dụng thư viện animate để tạo ra hiệu ứng động cho trang web. Nhưng hiệu ứng animation tạo ra từ file animate.css xảy ra ngay khi vào trang web, nên người ta sẽ sử dụng thư viện wow.js để kết hợp với animate.css tạo ra hiệu ứng động khi cuộn chuột đến. Nhưng khi chèn thư viện wow.js vào template, thì mặc định file này sẽ được load gần như là sau cùng, nên những hiệu ứng nằm ở ngay đầu trang sẽ đứng im cho đến lúc tải xong nó mới bắt đầu chạy hiệu ứng. Thật ra những ai đã dùng thư viện wow.js sẽ hiểu rất rõ điều này.

Sau nhiều giờ vắt óc suy nghĩ, tìm tòi, mình đã tìm ra cách để khắc phục điều đó, hôm nay mình sẽ chia sẻ cho các bạn tạo ra hiệu ứng động khi cuộn chuột không dùng đến wow.js nhưng đầy đủ tính năng như thư viện wow.js. Thủ thuật này sử dụng 1 đoạn rất ngắn jquery, ngắn gấp 10 lần thư viện wow.js, và sử dụng css khá ngắn so với chèn file animate.css


Tạo hiệu ứng động (animation) khi cuộn chuột tới
Ảnh minh họa

Các bước thực hiện:

Bước 1:  Chèn đoạn jquery này lên trên thẻ đóng </body>
<script> //<![CDATA[
jQuery(function(o){var i=function(){var a=o(window).scrollTop()+o(window).height(),n=o(".animate");0==n.size()&&o(window).off("scroll",i),n.each(function(i){var n=o(this);n.offset().top+n.height()-20<a&&n.removeClass("animate").addClass("animated")})};o(window).on("scroll",i),o(window).trigger("scroll")});
//]]>
</script>

Bước 2: Chèn đoạn css này lên trên thẻ ]]></b:skin>
.animate { visibility: hidden; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .animated { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }

Bước 3: Truy cập vào https://daneden.github.io/animate.css tìm các hiệu ứng cần dùng cho blog của mình

Bước 4: Truy cập vào https://raw.githubusercontent.com/daneden/animate.css/master/animate.css, nhấn Ctrl+F, nhập từ khóa là các hiệu ứng mà bạn cần lấy (nhập hệt từ khóa ở bước 3), copy và dán lên trên thẻ ]]></b:skin>

Cách sử dụng:

Thêm class animate và tên hiệu ứng bạn dùng. Ví dụ tôi dùng hiệu ứng Bounce thì là  <div class='animate Bounce'>Hiệu ứng</div>

Mặc định của thời gian trễ của hiệu ứng là 0s và thời gian xảy ra hiệu ứng là 1s.Để tùy chỉnh thời gian trễ của hiệu ứng hay thời gian xảy ra hiệu ứng ta chèn css trực tiếp. Ví dụ <div class='animate Bounce' style='animation-delay:3s;animation-duration:1s'>Hiệu ứng</div>

Tổng kết
Trên đây mình đã hướng dẫn các bạn cách tạo hiệu ứng động khi cuộn chuột.

Đặc điểm của thủ thuật này là:
 + Không cần chèn cả file animate.css và wow.js
 + Sử dụng rất ít jquery và css (cái nào dùng đến mình mới chèn)
 + Tối ưu được tốc độ tải trang web
 + Hiệu ứng chỉ xảy ra khi toàn bộ hoạt cảnh nằm trong màn hình (khi sử dụng wow.js, bạn chỉ cần cuộn chuột, hoạt cảnh lòi lên trên màn hình một tí xíu là nó đã chạy hiệu ứng, rất mất thẩm mĩ.
Chúc các bạn thành công

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm