Tạo hiệu ứng đẹp mắt khi scroll với wow.js vào Nukeviet

Thứ tư - 24/08/2016 08:52
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.
Tải và upload lên web theo đường dẫn: /themes/themes-ban/css/animate.css
và /themes/themes-ban/js/wow.min_.js

Chèn đoạn mã sau vào: /themes/themes-ban/layout/header_only.tpl (Nằm trong thẻ <head></head>
<link rel="stylesheet" href="/themes/themes-ban/css/animate.css">
<script src="/themes/themes-ban/js/wow.min_.js"></script>
<script>
 new WOW().init();
</script>
Kích hoạt hiệu ứng chuyển động

Sau khi chèn vào xong thì chúng ta sẽ tiến hành thí nghiệm thử với một đoạn code html ví dụ tương tự như sau
<div class="wow zoomIn">Chào các bạn ghé thăm website của tôi!! </div>
Bây giờ mình sẽ giải thích ý nghĩa của đoạn html trên nhé. Phân tích trong đoạn html trên thì phần class nó có 2 cái là wow và zoomIn
– class name “wow”: định nghĩa cho trình duyệt biết rằng đối tượng này được dùng để chuyển động.
– class name “zoomIn”: định nghĩa tên của loại chuyển động. Tên của các chuyển động này các bạn có thể tìm thấy trong tập tin animate.css (Bạn có thể tham khảo loại chuyển động tại đây: https://daneden.github.io/animate.css/)
Khi chúng ta kết hợp 2 class name đó lại với nhau thì nó sẽ chuyển động khá đẹp.

Các data nâng cao

Bây giờ bạn đã có được những hiệu ứng đẹp rồi, nhưng chúng ta vẫn chưa kiểm soát được thời gian chuyển động, số lần chuyển động,…. Bậy giờ bạn thử lại với đoạn code html sau:
<section class="wow zoomIn" data-wow-duration="2s" data-wow-delay="3s" data-wow-iteration="5">Chào các bạn ghé thăm website của tôi!! </section>
Các bạn sẽ thấy rằng, chuyển động sẽ diễn ra trong 2 giây, và sau 3s sẽ lập lại chuyển động đó 1 lần và chuyển động lập trong 5 lần. Bây giờ nhìn vào các data attribute thì chúng ta có thể dễ dàng nhận biết được ý nghĩa của nó rồi chứ nhỉ?

+ 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àn hình. khi cuộn đến khoảng cách đó, đối tượng sẽ bắt đầu chuyển động.

Nguồn bài viết: Sưu tầm có chỉnh sửa

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Thống kê truy cập
  • Đang truy cập20
  • Hôm nay451
  • Tháng hiện tại6,854
  • Tổng lượt truy cập90,230
Xem nhiều nhất
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây