Головна » Інструментарій » Бібліотеки JavaScript для ефектів Cool Scrolling

    Бібліотеки 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