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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Tư, 16 tháng 1, 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>

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

Thích
Bình luận

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ