Top 9 Plugin Cuộn Parallax Tốt Nhất Cho Website

Các Plugin Cuộn Parallax Hàng Đầu

1. ScrollMagic

Scroll Magic

ScrollMagic là một trong những plugin jQuery phổ biến và giàu tính năng nhất hiện nay. Thư viện Javascript này cho phép bạn tạo ra các hiệu ứng cuộn mượt mà như ma thuật. Sử dụng ScrollMagic, bạn có thể tạo hiệu ứng animation dựa trên vị trí cuộn của người dùng. Bạn có thể cố định, di chuyển hoặc tạo hiệu ứng động cho các phần tử HTML khi cuộn, với thời lượng tùy chỉnh và dễ dàng thêm hiệu ứng parallax vào website. ScrollMagic có dung lượng nhẹ (6kb khi nén), khả năng tùy chỉnh cao và tài liệu hướng dẫn chi tiết cùng nhiều nguồn tham khảo hữu ích. Plugin này cũng tương thích hoàn hảo với thiết bị di động.

Tham khảo các ví dụ của ScrollMagic để lấy cảm hứng và hướng dẫn sử dụng thư viện này.

Thông tin:

Trang chủ: http://janpaepke.github.io/ScrollMagic/

Tác giả: Jan Paepke

Cài đặt:

1. CDN: (tham khảo hướng dẫn từ trang chủ)

2. Tải xuống từ Github: https://github.com/janpaepke/ScrollMagic

2. skrollr

skrollr là một thư viện Javascript và CSS nhẹ, không sử dụng jQuery. Về cơ bản, nó là phiên bản đơn giản hóa của Scroll Magic dành cho CSS. Để sử dụng skrollr, bạn chỉ cần kiến thức về HTML và CSS. skrollr sử dụng các thuộc tính dữ liệu để tạo hiệu ứng động cho bất kỳ phần tử HTML nào bạn muốn. Một trong những nhược điểm chính của skrollr là hiệu ứng động chỉ hoạt động khi trang đang được cuộn. skrollr cho phép bạn tạo hiệu ứng động cho tất cả các thuộc tính CSS của phần tử HTML.

Thông tin:

Trang chủ: http://prinzhorn.github.io/skrollr/

Tác giả: Prinzhorn

Cài đặt: https://github.com/Prinzhorn/skrollr

3. pagePiling.js

pagePiling.js

PagePiling là một plugin jQuery cho phép bạn chia website thành các phần khác nhau xếp chồng lên nhau. Khi cuộn hoặc truy cập URL, mỗi phần sẽ được hiển thị bằng hiệu ứng trượt mượt mà. pagePiling.js tương thích với tất cả các nền tảng – máy tính, máy tính bảng và điện thoại di động – và hoạt động với hầu hết các trình duyệt. Nó cũng hoạt động tốt trên các trình duyệt cũ không hỗ trợ hiệu ứng động (như IE 7). Để sử dụng plugin, bạn cần thêm một tệp CSS và Javascript vào HTML. pagePiling.js được khởi tạo bằng hàm (document).ready:

$(document).ready(function() {
  $('#pagepiling').pagepiling();
});

Tham khảo README.md để biết thêm về cách khởi tạo nâng cao.

Thông tin:

Trang chủ: http://alvarotrigo.com/pagePiling/

Tác giả: alvarotrigo

Cài đặt: https://github.com/alvarotrigo/pagePiling.js

4. Alton

Alton

Alton là một plugin jQuery ‘scroll-jacking’. Scroll jacking nghĩa là tính năng cuộn gốc của trình duyệt bị vô hiệu hóa, thay vào đó là cuộn được điều khiển đến điểm tiếp theo trên màn hình hoặc đầu của container tiếp theo khi được kích hoạt (bằng chuột hoặc bàn di chuột).

Alton cho phép ba loại chức năng riêng biệt, được gọi là ‘Hero’, ‘Bookend’ và ‘Standard’. Standard cho phép bạn sử dụng cuộn toàn trang, với mỗi phần có chiều cao 100%. Bookend cho phép bạn tạo trải nghiệm kiểu bookend, trong khi Hero chỉ cho phép scroll jacking phần ‘Hero’, phần còn lại của trang sẽ sử dụng cuộn gốc.

Thông tin:

Trang chủ: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Tác giả: paper-leaf

Cài đặt: https://github.com/paper-leaf/alton/

5. Stellar.js

Stellar là một plugin jQuery giúp bạn dễ dàng thêm hiệu ứng cuộn parallax. Để chạy, trước tiên bạn phải chạy hàm $.stellar(). Cài đặt hiệu ứng động cho từng phần tử có thể được định cấu hình bằng cách sử dụng thuộc tính dữ liệu trên phần tử đó.

Stellar thậm chí cho phép bạn có hình nền parallax, là hình nền thay đổi vị trí khi cuộn. Một trong những tính năng hữu ích nhất của Stellar.js là offset. Tính năng này cho phép bạn tạo các mẫu parallax phức tạp một cách dễ dàng.

Thông tin:

Trang chủ: http://markdalgleish.com/projects/stellar.js/

Tác giả: Mark Dalgeish

Cài đặt: https://github.com/markdalgleish/stellar.js

6. multiScroll.js

multiScroll.js

Plugin này được tạo bởi cùng một nhà phát triển (alvarotrigo) đã tạo ra plugin pagePiling.js. multiScroll.js cho phép bạn tạo hiệu ứng mỗi phần trang tải thành hai phần chia đôi, trượt vào vị trí khi trang tải. multiScroll.js cho phép bạn đặt tốc độ cuộn, easing, tùy chọn cuộn bằng bàn phím và nhiều thuộc tính khác để bạn có thể tùy chỉnh hiệu ứng chính xác theo nhu cầu.

Thông tin:

Trang chủ: http://alvarotrigo.com/multiScroll/

Tác giả: alvarotrigo

Cài đặt: https://github.com/alvarotrigo/multiscroll.js

7. ScrollMe

ScrollMe

ScrollMe là một plugin để thêm hiệu ứng cuộn parallax đơn giản vào trang của bạn. Nó có thể thay đổi tỷ lệ, xoay, dịch chuyển và thay đổi độ mờ đục của các phần tử trên trang khi bạn cuộn xuống. ScrollMe không yêu cầu Javascript, chỉ cần kiến thức CSS. Bằng cách thêm lớp “animateme” và các thuộc tính dữ liệu bắt buộc, bạn có thể tạo hiệu ứng động cho bất kỳ phần tử HTML nào. ScrollMe là lựa chọn tốt nhất để thêm hiệu ứng CSS. Nó có dung lượng nhẹ và tất cả các hiệu ứng động đều mượt mà nếu bạn sử dụng chúng một cách vừa phải.

Thông tin:

Trang chủ: http://scrollme.nckprsn.com/

Tác giả: Nick Pearson

Cài đặt: https://github.com/nckprsn/scrollme

8. Parallax Scroll

Parallax Scroll

Parallax Scroll là một plugin jQuery dễ sử dụng cho phép bạn tạo hiệu ứng cuộn hình ảnh parallax được tìm thấy trên các trang web như Spotify. Nó khá đơn giản để sử dụng – chỉ cần chỉ định các lớp CSS bắt buộc cho phần tử chứa hình ảnh. Bạn có thể làm cho các phần tử đáp ứng bằng cách sử dụng truy vấn @media của CSS.

Thông tin:

Trang chủ: http://parallax-scroll.aenism.com/

Tác giả: Aen

Cài đặt: https://github.com/aentan/Parallax-Scroll

9. Jarallax

Jarallax

Jarallax là một thư viện CSS và Javascript chuyên về hiệu ứng cuộn parallax. Jarallax được cấu hình bằng Javascript (Không có jQuery, chỉ sử dụng Javascript thuần). Nó hỗ trợ các tính năng cuộn mượt mà, easing và hiệu ứng động parallax. Jarallax được hỗ trợ bởi hầu hết các trình duyệt, trên nhiều nền tảng. Trang web Jarallax có tài liệu hướng dẫn xuất sắc về cách tùy chỉnh Jarallax cho nhu cầu của bạn. Jarallax cũng có các video hướng dẫn cách thiết lập Jarallax cho website của bạn và cách bắt đầu.

Thông tin:

Trang chủ: http://www.jarallax.com/

Tác giả: Jarallax

Cài đặt: http://www.jarallax.com/?page=download