Бібліотеки JavaScript для ефектів Cool Scrolling

Дизайн сайту оживає з добре виконаною анімацією. Якщо ви шукаєте потрібні бібліотеки для додавання ефектів до вашого проекту, тут я зробив список деяких бібліотек Ви можете використовувати ефекти на основі події прокручування.

Коли користувач прокручує вашу веб-сторінку, дія можуть бути розроблені для запуску різноманітних варіантів анімації такі як ефекти зникнення, розмиття, 3D, паралакс і багато іншого. Тут є 25 бібліотек JS, які допоможуть вам досягти такого роду відповідей у дизайні сайту.

Виділіть

Бібліотека, яка дозволяє легко додавати анімацію прокрутки для веб- і мобільних пристроїв. Ви можете налаштувати користувальницьке ослаблення, 3D обертання, тривалість і багато параметрів мора на елемент, який ви хочете анімувати.

Залежності: немає | Розмір: | 2.9kb | Ліцензія: MIT

Aniview

Плагін, який працює разом з Animate.CSS, щоб активувати анімацію лише тоді, коли ваш елемент надходить у область перегляду.

Залежності: jQuery | Розмір: 1kb | Ліцензія: N / A

Зникають у вигляді

Додаток, який додає ефект "затухання в / з" до елементів, коли вони входять або виходять з попередньо визначених вікон перегляду.

Залежності: jQuery | Розмір: 3.81kb | Ліцензія: N / A

ОГО

WOW відкриє анімацію Animate.css після прокручування. Ви можете налаштувати тривалість анімації, затримки, зміщення та ітерації безпосередньо з розмітки HTML, а потім просто викликати клас елемента з JS.

Залежності: Animate.css | Розмір: 8.23kb | Ліцензія: MIT

ScrollMagic

Цей плагін буде показувати ефект "Магічний", коли користувач прокрутить сторінку. Він ідеально підходить для анімації, закріплення елемента або перемикання CSS-класу на основі положення прокрутки. ScrollMagic може працювати разом з GSAP і VelocityJS у створенні анімаційної сцени. Ознайомтеся з усіма демонстраціями тут.

Залежності: jQuery, GSAP, Velocity.js | Розмір: 16.9kb | Ліцензія: MIT

jScrollability

jScrollability дозволяє створювати окремі веб-сторінки зі складною анімацією на основі прокрутки. Після прокрутки користувача елемент анімується на основі позицій прокручування. Анімації запускаються на основі глибини прокручування, і, звичайно, ви можете встановити початок і кінець анімації.

Залежності: jQuery | Розмір: 1.86kb | Ліцензія: MIT

pushIn.js

Проста бібліотека для додавання ефекту «Доллі» або «push-in» до будь-якого елемента, який працює, коли користувач прокручує сторінку. Легко реалізувати: просто додайте параметри запуску, зупинки та швидкості параметри даних до вашого елемента HTML.

Залежності: ні | Розмір: 4.94kb | Ліцензія: N / A

Scrollissimo

Це бібліотека JS для додавання плавних керованих анімацій. Він використовує твенів Greensock і терміни для створення гладких анімацій.

Залежності: GreenShock TweenLite / TweenMax | Розмір: 2.94kb | Ліцензія: N / A

JQuery Плагін прокручування анімації

Це додаток jQuery для додавання анімації, що ініціюється за допомогою перегляду, за допомогою Greensock. Це полегшує анімацію елементів з полегшенням, перетворенням, масштабуванням, обертанням і 3D-анімацією.

Залежності: jQuery, GreenShock | Розмір: 14kb | Ліцензія: GNU GPL

Circlr

Circlr дозволяє створювати анімацію обертання до елемента, який ініціюється прокруткою, подіями миші або подіями дотику. Він ідеально підходить для того, щоб зробити вітрину продукту, який можна переглядати з усіх 360 градусів, що активується прокруткою користувача.

Залежності: ні | Розмір: 6.05kb | Ліцензія: MIT

Scrollimator

Scrollimator покаже вам позицію і прокручувати прогрес, і повертати значення, які можна використовувати для зміни анімації між прикріпленими до поведінки прокрутки користувача. Він підтримує вертикальні та горизонтальні прокрутки.

Залежності: ні | Розмір: 37.7kb | Ліцензія: N / A

Кроссфейд

Crossfade - це плагін для додавання ефекту кроссфейда до зображення. Розмитий ефект продовжуватиметься, коли користувач прокручується нижче.

Залежності: jQuery | Розмір: 3.19kb | Ліцензія: MIT

Ефект прокручування сторінки

Це бібліотека для експериментальних ефектів прокручування сторінок, створених CodyHouse. Він використовує velocitey.js анімації.

Залежності: jQuery, Velocity.js | Розмір: 17,6 кб | Ліцензія: N / A

jquery.parallax-scroll

Ця бібліотека дозволяє додати плавний ефект паралакса до вертикальної прокрутки сторінки. Просто імпортуйте jQuery і jquery.easing.1.3.js, а потім додайте "дані-паралакс" атрибут і додаткові параметри для вашого елемента, щоб налаштувати ефект.

Залежності: jQuery, jQuery.easing | Розмір: 8,72 кб | Ліцензія: GNU GPL

parallax.js

Parallax.js - це простий плагін, який додає ефект прокрутки паралакса, натхненний веб-сайтом Spotify.

Залежності: jQuery | Розмір: 6.63kb | Ліцензія: MIT

Enllax

Enllax - це суперлегка бібліотека для використання при застосуванні ефекту паралакса до будь-якого елемента прокрутки. Ви можете встановити фон або елементи переднього плану, щоб мати ефект ефекту. Він працює як для вертикальної, так і для горизонтальної прокрутки.

Залежності: jQuery | Розмір: 1.53kb | Ліцензія: MIT

Розмиття на прокручування

Ця бібліотека допомагає додати ефект розмиття до зображення, яке буде викликано прокруткою сторінок. Чим глибше ви прокручуєте сторінку вниз, тим більше розмивається зображення.

Залежності: ні | Розмір: 1.1kb | Ліцензія: N / A

boxLoader

boxLoader - це простий плагін для завантаження елементів при прокручуванні сторінок. Параметр, який слід встановити, - це напрямки (x або y), положення на відсотки, ефект, а також тривалість.

Залежності: jQuery | Розмір: 3.42kb | Ліцензія: N / A

Нахилена сторінка Прокрутка

Коли користувач прокручує сторінку, цей плагін відкриє дивовижний ефект 3D-нахилу елементу, який ви налаштовуєте.

Залежності: jQuery | Розмір: 1.5kb | Ліцензія: GNU GPL

AhRelax

AhRelax забезпечує спосіб зробити анімації на основі швидкого прокручування. Це легкий вага і також має високу продуктивність. Детальніше про це читайте тут.

Залежності: jQuery | Розмір: 1.6kb | Ліцензія: MIT

Fancy Scroll

Якщо ви коли-небудь бачите ефект переповнення на Android або iOS, за допомогою цього додатка ви зможете застосувати його до свого сайту. Можна додати анімацію, як відскок або світіння, коли користувач досягає верхньої / нижньої частини сторінки.

Залежності: jQuery | Розмір: 2.64kb | Ліцензія: GNU GPL

Прокрутка зображення паралакса

Цей плагін зробить елементи плаваючими і переміщуються, коли користувач прокручує сторінку вниз.

Залежності: jQuery | Розмір: 8.69kb | Ліцензія: MIT

Rlsmooth

Це невеликий плагін для створення поточного ефекту, коли користувач прокручує сторінку вниз. Є три ефекти: слайд, зникають і показують.

Залежності: jQuery | Розмір: 1.95kb | Ліцензія: MIT

Прокрутка

Додає прості ефекти для прокрутки сторінок, такі як масштаб, поворот, переклад і зміна непрозорості елементів. Це легко налаштувати: просто імпортуйте jQuery, цей плагін і встановіть параметри анімації на розмітку елемента.

Залежності: jQuery | Розмір: 5,45 кб | Ліцензія: N / A

Паралакс ImageScroll

Цей плагін дозволяє надати ефект паралакса будь-якому зображенню на вашій сторінці. Це робить використання CSS3 Transform, щоб зробити ефект. Цей плагін підтримує jQuery і AMD.

Залежності: jQuery | Розмір: 8.01kb | Ліцензія: MIT