Các trang web cuộn dài đã trở thành một xu hướng thiết kế web thực sự phổ biến. Một trong những loại phụ thú vị nhất trong số này là các trang web cuộn thị sai, trong đó hình ảnh di chuyển để tạo ra hiệu ứng thị sai. Khi người dùng cuộn xuống trang, các hình động được kích hoạt và tổng thể nó mang lại một cái nhìn và cảm giác mới mẻ cho bất kỳ trang web nào nếu được thực hiện đúng.
Tạo một trang web cuộn thị sai thường rất tẻ nhạt vì nó đòi hỏi kiến thức chuyên sâu về CSS, Javascript và thiết kế web tốt để thực hiện. Dưới đây là danh sách các Plugin cuộn Parallax tốt nhất không chỉ giúp bạn dễ dàng tạo các trang web cuộn parallax hơn mà còn có thư viện hiệu ứng parallax được hỗ trợ tốt để bạn phát triển trang web dễ nhìn và nhanh hơn .
TUYÊN BỐ TỪ CHỐI : Trước khi bắt đầu, hãy lưu ý rằng để sử dụng các plugin này, cần có một số kiến thức về công nghệ web (HTML / CSS / Javascript). Hầu hết các plugin được liệt kê sử dụng jquery, vì vậy kiến thức về Jquery cũng có thể cần thiết.
Các plugin cuộn Parallax
1. ScrollMagic
ScrollMagic là một trong những plugin jquery phổ biến và giàu tính năng nhất hiện có. Đây là một thư viện javascript cho phép bạn tạo các hiệu ứng cuộn dường như kỳ diệu. Sử dụng ScrollMagic bạn có thể làm động dựa trên vị trí cuộn của mình. Điều này có nghĩa là bạn có thể sửa chữa, di chuyển hoặc làm động các phần tử HTML khi bạn cuộn, trong bất kỳ khoảng thời gian nào bạn muốn và cũng dễ dàng thêm các hiệu ứng thị sai vào trang web của bạn. Nó có khả năng tùy biến cao và cũng rất nhẹ (6kb khi được nén). Trong số các plugin cuộn parallax khác, Scroll Magic có tài liệu bên ngoài và tài nguyên tốt nhất. Nó hoàn toàn tương thích với điện thoại di động.
ScrollMagic có rất nhiều ví dụ được liệt kê. Kiểm tra xem họ có cảm hứng và hướng dẫn sử dụng thư viện này.
Trong khoảng:
Trang chủ: //janpaepke.github.io/ScrollMagic/
Tạo bởi: Jan Paepke
Cài đặt:
1. CDN:
2. Tải xuống từ Github
2. skrollr
skrollr là một thư viện Javascript và CSS thuần túy nhẹ, không có jQuery liên quan. Về cơ bản, nó là 'Scroll Magic được đơn giản hóa cho CSS'. Để sử dụng skrollr, bạn không cần biết Javascript hay bất kỳ jQuery nào. Chỉ cần HTML và CSS là đủ. skrollr sử dụng các thuộc tính dữ liệu để làm động 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à hình động chỉ hoạt động trong khi trang đang được cuộn. Nếu không, tất cả các hiệu ứng được giữ lại. skrollr cho phép bạn làm động tất cả các thuộc tính CSS của các phần tử HTML của bạn.
Trong khoảng:
Trang chủ: //prinzhorn.github.io/skrollr/
Tạo bởi: Prinzhorn
Cài đặt: Tải xuống từ Github
3. pagePiling.js 
Xếp chồng trang là một plugin jQuery cho phép bạn tạo trang web của mình thành các phần khác nhau chồng chất lên nhau. Khi cuộn hoặc bằng cách truy cập URL, mỗi phần sẽ được hiển thị trong hình động trượt gọn gàng. pagePiling.js tương thích với tất cả các nền tảng - máy tính để bàn, máy tính bảng và thiết bị di động - và hoạt động với hầu hết các trình duyệt. Nó xuống cấp một cách duyên dáng trên các trình duyệt cũ không hỗ trợ hoạt hình của nó (như IE 7). Để sử dụng plugin, bạn cần bao gồm CSS và tệp Javascript bên trong HTML của mình. pagePiling.js được khởi tạo bởi (document). yet function:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Để biết các khởi tạo nâng cao hơn, hãy xem qua README.md.
Trong khoảng:
Trang chủ: //alvarotrigo.com/pagePiling/
Tạo bởi: alvarotrigo
Cài đặt: Tải xuống từ Github
4. Alton
Alton là một plugin 'di chuyển đến chúng tôi' của jQuery. Ghép cuộn có nghĩa là cuộn gốc của trình duyệt của bạn bị vô hiệu hóa khi cuộn được nhắm mục tiêu mà khi được bắt đầu (bằng bánh xe chuột hoặc bàn di chuột) sẽ đưa bạn đến điểm dọc tiếp theo trên màn hình hoặc trên cùng của hộp chứa tiếp theo.
Alton cho phép ba loại chức năng riêng biệt, được gọi là 'Hero', 'Bookend' và 'Standard'. Tiêu chuẩn cho phép bạn sử dụng cuộn trang đầy đủ, với mỗi phần có chiều cao 100%. Một cuộn mang đến phần tiếp theo hoặc phần trước. Bookend cho phép bạn tạo trải nghiệm kiểu bookend trong khi Hero cho phép bạn chỉ cuộn jack phần 'Hero', với phần còn lại của trang có cuộn gốc (được bật lại).
Trong khoảng:
Trang chủ: //apers-leaf.com/alton-jquery-scroll-jacking-plugin/
Tạo bởi: lá giấy
Cài đặt: Tải xuống từ Github
5. Stellar.js
Stellar là một plugin jQuery thông qua đó bạn có thể dễ dàng thêm các hiệu ứng cuộn parallax. Để chạy, trước tiên bạn phải chạy hàm $ .stellar (). Cài đặt hoạt ảnh cho các thành phần riêng lẻ có thể được cấu hình bằng các thuộc tính dữ liệu trên thành phần đó.
Stellar thậm chí cho phép bạn có nền thị sai, đó là nền được định vị lại khi cuộn. Một trong những tính năng hữu ích nhất của Stellar.js là offset.
Tất cả các yếu tố sẽ trở về vị trí ban đầu của chúng khi cha mẹ bù của chúng gặp cạnh của màn hình cộng cộng hoặc trừ đi phần bù tùy chọn của riêng bạn. Điều này cho phép bạn tạo các mẫu thị sai phức tạp rất dễ dàng. (Tài liệu xuất sắc)
Trong khoảng:
Trang chủ: //markdalgleish.com/projects/stellar.js/
Tạo bởi: Mark Dalgeish
Cài đặt: Tải xuống từ Github
6. multiScroll.js
Plugin này được tạo bởi cùng một nhà phát triển (alvarotrigo), người đã tạo ra plugin pagePiling.js. Về cơ bản, nhiều cuộn sẽ làm gì, nó cho phép bạn tạo một hiệu ứng trong đó mỗi phần trang tải thành hai phần được chia thành vị trí khi tải trang. Kiểm tra trang chủ để xem những gì nó trông giống như trên trình duyệt của bạn. multiScroll.js cho phép bạn đặt tốc độ cuộn, nới lỏng, tùy chọn cuộn bàn phím và nhiều thuộc tính khác để bạn có thể tùy chỉnh hiệu ứng theo chính xác cách bạn cần.
Trong khoảng:
Trang chủ: //alvarotrigo.com/multiScroll/
Tạo bởi: alvarotrigo
Cài đặt: Tải xuống từ Github
7. Cuộn
ScrollMe là một plugin để thêm các hiệu ứng cuộn parallax đơn giản vào trang của bạn. Nó có thể chia tỷ lệ, xoay, dịch và thay đổi độ mờ của các thành phần trên trang khi bạn cuộn xuống. ScrollMe không yêu cầu Javascript và chỉ có kiến thức CSS là đủ. Bằng cách thêm vào lớp hoạt hình và các thuộc tính dữ liệu cần thiết, bạn có thể làm động bất kỳ thành phần HTML nào. ScrollMe được sử dụng tốt nhất để thêm hiệu ứng CSS. Nó rất nhẹ và tất cả các hình ảnh động đều mượt mà, miễn là bạn sử dụng chúng trong chừng mực.
Trong khoảng:
Trang chủ: //scrollme.nckprsn.com/
Tạo bởi: Nick Pearson
Cài đặt: Tải xuống từ Github
8. Cuộn Parallax
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 cần thiết cho chủ sở hữu hình ảnh. Thay vì sử dụng các thẻ, để sử dụng plugin này, bạn phải sử dụng các yếu tố có hình ảnh nền được chỉ định (bằng cách sử dụng thuộc tính CSS `nền-hình ảnh. Bạn có thể làm cho các yếu tố phản ứng nhanh bằng các truy vấn CSS @media.
Trong khoảng:
Trang chủ: //parallax-scroll.aenism.com/
Tạo bởi: Aen
Cài đặt: Tải xuống từ Github
9. Jarallax
Jarallax là một thư viện CSS và Javascript chuyên về các hiệu ứng cuộn parallax. Jarallax được cấu hình bằng Javascript (Không có jQuery, chỉ là vanilla thuần túy). Nó hỗ trợ các tính năng cuộn mượt mà, dễ dàng và hoạt hình thị sai. Jarallax được hỗ trợ bởi hầu hết các trình duyệt, trên các nền tảng. Trang web Jarallax có tài liệu tuyệt vời 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 cho biết cách thiết lập Jarallax cho trang web của bạn và cách bắt đầu.
Trong khoảng:
Trang chủ: //www.jarallax.com/
Tạo bởi: Jarallax
Cài đặt: Tải xuống từ trang web Jarallax
10. Siêu nhân
Superscrollorama là một plugin dựa trên jQuery hỗ trợ hoạt ảnh cuộn. Nó được cung cấp bởi TweenMax và Greensock Tweening Engine, giúp tăng hiệu suất hoạt hình và độ mượt mà. Hoạt ảnh Superscrollorama được gọi thông qua jQuery và bạn cũng có thể sử dụng hầu hết các hàm TweenMax.js. Thật không may, những hình ảnh động này không được các thiết bị di động hỗ trợ đầy đủ (vì các thiết bị màn hình cảm ứng xử lý việc cuộn theo một cách khác). Tuy nhiên, bằng cách sử dụng phương thức setScrollContainer Offerset, các hiệu ứng Superscrollorama có thể được truy cập trên các thiết bị di động.
Đây là mã để làm điều này:
.setScrollContainerOffset(x, y)
(x: phần bù x của bộ điều khiển cuộn, y: phần bù x của bộ điều khiển cuộn)
Trong khoảng:
Trang chủ: //johnpolacek.github.io/superscrollorama/
Tạo bởi: johnpolacek
Cài đặt: Tải xuống từ Github
XEM CSONG: 10 Trình tạo trang web tĩnh tốt nhất
