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

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

Oleh Phạm Hoàng Nam
Pada tháng 1 16, 2019
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.

Hiệu Ứng Chuyển Động Khi Kéo Trang, CSS 3 Animation và CSS 3 Transition, Matthieu Aussaguel, jQuery và thư viện animation.css, Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot

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>

Bạn có thể thích những bài đăng này

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

Để 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