Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot

WOW.js được phát triển bởi Matthieu Aussaguel, một kỹ sư lập trình web hiện đang sống và làm việc tại Thái Lan. WOW.js là sự kết hợp giữa jQuery và thư viện animation.css được viết sẵn các kịch bản. Khi bạn scroll website thì jQuery sẽ bắt sự kiện và kích hoạt chuyển động, các đối tượng sẽ chuyển động và diễn hoạt với sự hỗ trợ của CSS 3 Animation và CSS 3 Transition.

Các bước thực hiện
Chèn 2 thư viện dưới đây lên trên thẻ đóng </head>

<link href='https://daneden.github.io/animate.css/animate.min.css' rel='stylesheet'/>
<script src='https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js'></script>

Sau đó gọi wow.js bằng đoạn script sau.

<script> new WOW().init(); </script>

Cách sử dụng

data-wow-duration: Thời gian chuyển động của đối tượng.
data-wow-delay: Thời gian chờ trước khi đối tượng chuyển động.
data-wow-iteration: Số lần lập lại của một chuyển động.
data-wow-offset: Khoảng cách giữa đối tượng và điểm cuối màng hình. khi cuộn đến khoảng cách đó, đối tượng sẽ bắt đầu chuyển động.
Các class chuyển động

XEM NGAY

Để sử dụng wow.js thì các bạn chỉ việc thêm class='wow kèm theo tên hiệu ứng' và những thuộc tính phía trên vào thẻ cần chuyển động nhé.
Ví dụ:

<div class='wow bounce' data-wow-delay='3s'>Test</div>

Demo

Giống footer của www.sibenit.net nhé :D

Lời kết

Chúc các bạn thành công nhé. Script này khá đẹp mắt cho blogspot của các bạn đấy :P

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.