Share Cuộn trang parallax với thư viện jInvertScroll

filiallion · 08/30/2018

Đối với các bạn thiết kế các website dạng one page thì chắc hẳn đã quen thuộc với các hiệu ứng cuộn trang dọc. Bài viết này tôi sẽ hướng dẫn các bạn sử dụng thư viện jInvertScroll để tạo ra hiệu ứng cuộn trang ngang parallax mà các bạn thường thấy trên các slideshow.

Thư viện jInvertScroll được viết dựa trên nền tảng jQuery nên các bạn cần phải tích hợp thư viện jQuery vào website trước. Sau đó, các bạn truy cập địa chỉ https://www.pixxelfactory.net/jInvertScroll để tải thư viện jInvertScroll và tích hợp vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jInvertScroll.css" rel="stylesheet">
<script src="path/to/jInvertScroll.min.js"></script>

Các bạn khai báo cài đặt thư viện jInvertScroll như sau:

JavaScript:

$.jInvertScroll(['.jinvert-scroll'], {
    width: 'auto',
    height: 'auto'
});

Các bạn có thể tìm hiểu thêm về thư viện jInvertScroll tại địa chỉ https://www.pixxelfactory.net/jInvertScroll.

Share Cuộn trang parallax với thư viện jInvertScroll

filiallion

Administrator