Thư viện JavaScript cho các hiệu ứng cuộn tuyệt vời

Một thiết kế trang web đi vào cuộc sống với hình ảnh động được thực hiện tốt. Nếu bạn đang tìm kiếm các thư viện thích hợp để thêm hiệu ứng cho dự án của mình, thì ở đây tôi đã tạo một danh sách một số thư viện bạn có thể sử dụng để tạo hiệu ứng dựa trên sự kiện cuộn.

Khi người dùng cuộn xuống trang web của bạn, hành động có thể được thiết kế để kích hoạt một loạt các tùy chọn hoạt hình chẳng hạn như hiệu ứng mờ dần, mờ, 3D, thị sai, v.v. Có 25 thư viện JS ở đây có thể giúp bạn đạt được loại phản hồi đó trong thiết kế trang web của bạn.

Tiết lộ cuộn

Một thư viện giúp dễ dàng thêm hình ảnh động cuộn cho cả web và di động. Bạn có thể đặt nới lỏng tùy chỉnh, xoay 3D, thời lượng và nhiều tham số mor cho thành phần bạn muốn tạo hiệu ứng.

Phụ thuộc: không có | Kích thước: 2.9kb | Giấy phép: MIT

Aniview

Một plugin hoạt động cùng với Animate.CSS để chỉ kích hoạt hoạt ảnh khi phần tử của bạn xuất hiện trong chế độ xem.

Phụ thuộc: jQuery | Kích thước: 1kb | Giấy phép: Không có

Mất dần vào xem

Một plugin bổ sung hiệu ứng mờ dần vào / ra cho các phần tử khi chúng vào hoặc thoát các khung nhìn được xác định trước.

Phụ thuộc: jQuery | Kích thước: 3,81kb | Giấy phép: Không có

Ôi

WOW sẽ tiết lộ hoạt hình Animate.css khi sự kiện cuộn. Bạn có thể thiết lập thời lượng hoạt hình, độ trễ, độ lệch và số lần lặp ngay từ đánh dấu HTML, sau đó chỉ cần gọi lớp của phần tử từ JS.

Phụ thuộc: Animate.css | Kích thước: 8,23kb | Giấy phép: MIT

ScrollMagic

Plugin này sẽ hiển thị hiệu ứng 'Magical' khi người dùng cuộn trang. Nó hoàn hảo để tạo hiệu ứng động, ghim một phần tử hoặc chuyển đổi lớp CSS, tất cả dựa trên vị trí cuộn. ScrollMagic có thể hoạt động cùng với GSAP và VelocityJS trong việc tạo cảnh hoạt hình. Xem bản demo hoàn chỉnh tại đây.

Phụ thuộc: jQuery, GSAP, Velocity.js | Kích thước: 16,9kb | Giấy phép: MIT

Khả năng kiểm soát

jScrollability cho phép bạn tạo các trang web đơn với các hình động dựa trên cuộn phức tạp. Khi sroll người dùng, phần tử sẽ hoạt hình dựa trên các vị trí cuộn. Ảnh động chạy dựa trên độ sâu cuộn và dĩ nhiên bạn có thể đặt điểm bắt đầu và kết thúc của hình động.

Phụ thuộc: jQuery | Kích thước: 1,86kb | Giấy phép: MIT

pushIn.js

Một thư viện đơn giản để thêm hiệu ứng dolly-in hoặc đẩy vào bất kỳ yếu tố nào hoạt động khi người dùng cuộn qua trang. Thật dễ thực hiện: chỉ cần thêm các tham số bắt đầu, dừng và tăng tốc vào dữ liệu đến phần tử HTML của bạn.

Phụ thuộc: không ai | Kích thước: 4,94kb | Giấy phép: Không có

Scrollissimo

Đây là một thư viện JS để thêm các hình ảnh động được điều khiển cuộn trơn tru. Nó sử dụng thanh thiếu niên và thời gian của Greensock để tạo ra hình ảnh động mượt mà hơn.

Phụ thuộc: GreenShock TweenLite / TweenMax | Kích thước: 2,94kb | Giấy phép: Không có

Plugin jQuery Animation Scroll

Đây là một plugin jQuery để thêm hình ảnh động kích hoạt khung nhìn bằng Greensock. Nó giúp dễ dàng tạo hiệu ứng cho các yếu tố bằng cách nới lỏng, biến đổi, chia tỷ lệ, xoay và hoạt hình 3D.

Phụ thuộc: jQuery, GreenShock | Kích thước: 14kb | Giấy phép: GPL GNU

Vòng tròn

Circlr cho phép bạn tạo hoạt hình xoay thành một yếu tố, được kích hoạt bằng cách cuộn, các sự kiện chuột hoặc các sự kiện chạm. Thật hoàn hảo để tạo ra một sản phẩm giới thiệu về một sản phẩm có thể được xem từ tất cả 360 độ, được kích hoạt bằng cuộn người dùng.

Phụ thuộc: không ai | Kích thước: 6.05kb | Giấy phép: MIT

Cuộn giấy

Scrollimator sẽ hiển thị cho bạn vị trí và tiến trình cuộn và trả về các giá trị mà bạn có thể sử dụng để thay đổi mười hai hình động được đính kèm với hành vi cuộn của người dùng. Nó hỗ trợ cuộn dọc và ngang.

Phụ thuộc: không ai | Kích thước: 37,7kb | Giấy phép: Không có

Giao nhau

Crossfade là một plugin để thêm hiệu ứng crossfade vào hình ảnh. Hiệu ứng mờ sẽ tiếp tục khi người dùng cuộn xuống dưới.

Phụ thuộc: jQuery | Kích thước: 3,19kb | Giấy phép: MIT

Hiệu ứng cuộn trang

Đây là một thư viện cho các hiệu ứng cuộn trang thử nghiệm được tạo bởi CodyHouse. Nó sử dụng velocitey.js hình ảnh động.

Phụ thuộc: jQuery, Velocity.js | Kích thước: 17,6kb | Giấy phép: Không có

jquery.parallax-cuộn

Thư viện này cho phép bạn thêm hiệu ứng thị sai cho cuộn trang dọc. Chỉ cần nhập jQuery và jquery.ease.1.3.js, sau đó thêm 'dữ liệu thị sai' thuộc tính và các tham số tùy chọn cho thành phần của bạn để tùy chỉnh hiệu ứng.

Phụ thuộc: jQuery, jQuery. | Kích thước: 8,72kb | Giấy phép: GPL GNU

parallax.js

Parallax.js là một plugin đơn giản có thêm hiệu ứng cuộn parallax, lấy cảm hứng từ trang web Spotify.

Phụ thuộc: jQuery | Kích thước: 6,63kb | Giấy phép: MIT

Enllax

Enllax là một thư viện siêu nhẹ để sử dụng cho việc áp dụng hiệu ứng thị sai cho bất kỳ yếu tố cuộn nào. Bạn có thể đặt các yếu tố nền hoặc tiền cảnh thành hiệu ứng hav ethis. Nó hoạt động cho cả cuộn dọc và cuộn ngang.

Phụ thuộc: jQuery | Kích thước: 1,53kb | Giấy phép: MIT

Làm mờ khi cuộn

Thư viện này giúp bạn thêm hiệu ứng làm mờ vào hình ảnh, sẽ được kích hoạt bằng cách cuộn trang. Bạn càng cuộn xuống trang càng sâu, hình ảnh càng mờ.

Phụ thuộc: không ai | Kích thước: 1.1kb | Giấy phép: Không có

hộp tải

boxLoader là một plugin đơn giản để tải các yếu tố khi cuộn trang. Tham số bạn nên đặt là chỉ đường (x hoặc y), vị trí theo phần trăm, hiệu ứng và thời lượng.

Phụ thuộc: jQuery | Kích thước: 3,42kb | Giấy phép: Không có

Cuộn trang nghiêng

Khi người dùng cuộn qua một trang, plugin này sẽ tiết lộ hiệu ứng nghiêng 3D tuyệt vời cho thành phần bạn thiết lập.

Phụ thuộc: jQuery | Kích thước: 1,5kb | Giấy phép: GPL GNU

AhRelax

AhRelax cung cấp một cách để tạo hiệu ứng động dựa trên cuộn nhanh. Đó là trọng lượng và cũng có hiệu suất tuyệt vời. Bạn có thể đọc thêm về nó ở đây.

Phụ thuộc: jQuery | Kích thước: 1.6kb | Giấy phép: MIT

Cuộn ưa thích

Nếu bạn từng thấy hiệu ứng cuộn tràn trên Android hoặc iOS, với plugin này, giờ đây bạn có thể áp dụng hiệu ứng này cho trang web của mình. Bạn có thể thêm hình động, có độ nảy hoặc phát sáng khi người dùng đến đầu / cuối trang.

Phụ thuộc: jQuery | Kích thước: 2,64kb | Giấy phép: GPL GNU

Parallax cuộn hình ảnh

Plugin này sẽ làm cho các phần tử nổi và di chuyển khi người dùng cuộn xuống hoặc lên trang.

Phụ thuộc: jQuery | Kích thước: 8,69kb | Giấy phép: MIT

Rlsmooth

Đây là một plugin nhỏ để tạo hiệu ứng trôi chảy khi người dùng lướt xuống hoặc lên trang. Có ba hiệu ứng có sẵn: trượt, mờ dần và hiển thị.

Phụ thuộc: jQuery | Kích thước: 1,95kb | Giấy phép: MIT

Cuộn

Thêm các hiệu ứng đơn giản để cuộn trang như tỷ lệ, xoay, dịch và thay đổi độ mờ của các yếu tố. Thật dễ dàng để thiết lập: chỉ cần nhập jQuery, plugin này và đặt các tham số hoạt hình trên phần đánh dấu của phần tử.

Phụ thuộc: jQuery | Kích thước: 5,45kb | Giấy phép: Không có

Hình ảnh thị sai

Plugin này cho phép bạn tạo hiệu ứng thị sai cho bất kỳ hình ảnh nào trên trang của bạn. Nó sử dụng CSS3 Transform để làm cho hiệu ứng hoạt động. Plugin này có hỗ trợ cho jQuery và AMD.

Phụ thuộc: jQuery | Kích thước: 8,01kb | Giấy phép: MIT