Share Tạo hiệu ứng scroll với thư viện ScrollZip

filiallion

Administrator
Staff member
Administrator
Messages
319
Points
10
Language
Tiếng Việt
Thư viện ScrollZip sẽ tạo ra hiệu ứng scroll các thành phần được chỉ định trên trang web khi các thành phần đó xuất hiện trên phần hiển thị của màn hình thiết bị. Với sự kết hợp của thư viện Animate.css mà tôi đã từng giới thiệu với các bạn ở bài viết "Tạo hiệu ứng đẹp mắt với thư viện Animate.css" sẽ giúp các bạn có những hiệu ứng scroll đẹp mắt hơn.

Việc sử dụng thư viện ScrollZip cũng khá đơn giản, trước tiên các bạn cần phải tải thư viện ScrollZip tại địa chỉ https://github.com/tinywall/scrollzip và tích hợp vào website với nội dung mã lệnh như sau:
HTML:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.scrollzip.js"></script>
Các bạn lưu ý là cần phải tích hợp cả thư viện jQuery như trên.

Và để cài đặt hiệu ứng scroll cho thành phần nào đó các bạn tham khảo nội dung mã lệnh JavaScript sau đây:
JavaScript:
$(document).ready(function() {
    $(document).scrollzipInit();
    
    $(window).on('load scroll resize', function() {
        $('.section').scrollzip({
            showFunction: function() {
                $(this).css('visibility', 'visible')
                       .addClass('animated bounceInLeft');
            },
            hideFunction: function() {
                $(this).css('visibility', 'hidden')
                       .removeClass('animated');
            }
        });
    )};
)};
Các thành phần muốn áp dụng hiệu ứng scroll các bạn tạo như ví dụ sau:
HTML:
<section class="section">Section 1</section>
<section class="section">Section 2</section>
<section class="section">Section 3</section>
Các bạn có thể xem qua các hiệu ứng demo của thư viện ScrollZip tại địa chỉ http://demo.tinywall.net/scrollzip.
 
Top