Библиотеки JavaScript для крутых эффектов прокрутки
Дизайн сайта оживает с хорошо выполненной анимацией. Если вы ищете подходящие библиотеки для добавления эффектов в ваш проект, здесь я составил список некоторых библиотек, которые Вы можете использовать, чтобы дать эффекты на основе события прокрутки.
Когда пользователь прокручивает вашу веб-страницу вниз, действие может быть разработан для запуска различных вариантов анимации такие как эффекты затухания, размытие, 3D, параллакс и многое другое. Здесь есть 25 библиотек JS, которые могут помочь вам добиться такого рода отклика в дизайне вашего сайта..
Свиток Раскрыть
Библиотека, которая позволяет легко добавлять анимацию прокрутки как для Интернета, так и для мобильных устройств. Вы можете установить произвольное замедление, 3D-повороты, длительность и многие другие параметры для элемента, который вы хотите анимировать.
зависимости: нет | Размер: 2.9kb | Лицензия: MIT
Aniview
Плагин, который работает вместе с Animate.CSS для включения анимации, только когда ваш элемент входит в область просмотра.
зависимости: JQuery | Размер: 1 Кб | Лицензия: N / A
Fade Into View
Плагин, который добавляет эффект постепенного появления / исчезновения к элементам, когда они входят или выходят из предопределенных окон просмотра.
зависимости: 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,9 КБ | Лицензия: MIT
jScrollability
jScrollability позволяет создавать отдельные веб-страницы со сложной анимацией на основе прокрутки. После пользовательской прокрутки элемент будет анимирован на основе позиций прокрутки. Анимации запускаются на основе глубины прокрутки, и, конечно, вы можете установить начало и конец анимации.
зависимости: JQuery | Размер: 1,86 Кб | Лицензия: MIT
pushIn.js
Простая библиотека для добавления эффекта вставки или вставки в любой элемент, который работает, когда пользователь прокручивает страницу. Это легко реализовать: просто добавьте параметры start, stop и speed в данных PARAMS на ваш элемент HTML.
зависимости: никто | Размер: 4.94kb | Лицензия: N / A
Scrollissimo
Это библиотека JS для добавления плавных анимаций, управляемых прокруткой. Он использует анимацию и графики Greensock для создания более плавной анимации.
зависимости: GreenShock TweenLite / TweenMax | Размер: 2.94kb | Лицензия: N / A
Плагин прокрутки анимации jQuery
Это плагин jQuery для добавления анимации, инициируемой окном просмотра, с помощью Greensock. Это позволяет легко анимировать элементы с помощью замедления, преобразования, масштабирования, вращения и 3D-анимации..
зависимости: JQuery, GreenShock | Размер: 14 КБ | Лицензия: GNU GPL
Circlr
Circlr позволяет создавать анимацию поворота для элемента, который запускается прокруткой, событиями мыши или касаниями. Идеально сделать витрину продукта, которую можно просматривать со всех 360 градусов, активируемой пользовательской прокруткой.
зависимости: никто | Размер: 6.05kb | Лицензия: MIT
Scrollimator
Scrollimator покажет вам положение и прогресс прокрутки, а также вернет значения, которые вы можете использовать для изменения анимации анимации, связанной с прокруткой пользователя. Поддерживает вертикальную и горизонтальную прокрутку.
зависимости: никто | Размер: 37.7kb | Лицензия: N / A
Crossfade
Crossfade - это плагин для добавления эффекта кроссфейда к изображению. Эффект размытия будет продолжаться, когда пользователь прокручивает дальше вниз.
зависимости: JQuery | Размер: 3.19kb | Лицензия: MIT
Эффект прокрутки страницы
Это библиотека для экспериментальных эффектов прокрутки страниц, созданных CodyHouse. Он использует velocitey.js анимации.
зависимости: jQuery, Velocity.js | Размер: 17.6kb | Лицензия: N / A
jquery.parallax улитка
Эта библиотека позволяет добавить плавный эффект параллакса к вертикальной прокрутке страницы. Просто импортируйте jQuery и jquery.easing.1.3.js, затем добавьте «Данных параллакса» атрибут и необязательные patameters для вашего элемента, чтобы настроить эффект.
зависимости: jQuery, jQuery.easing | Размер: 8.72kb | Лицензия: GNU GPL
parallax.js
Parallax.js - простой плагин, который добавляет эффект прокрутки параллакса, вдохновленный сайтом Spotify..
зависимости: JQuery | Размер: 6.63kb | Лицензия: MIT
Enllax
Enllax - это сверхлегкая библиотека для применения эффекта параллакса к любому элементу прокрутки. Вы можете установить элементы фона или переднего плана, чтобы иметь эффект этики. Работает как с вертикальной, так и с горизонтальной прокруткой.
зависимости: JQuery | Размер: 1,53 КБ | Лицензия: MIT
Размытие на свитке
Эта библиотека поможет вам добавить эффект размытия к изображению, которое будет вызвано прокруткой страницы. Чем глубже вы прокручиваете страницу вниз, тем более размыто изображение.
зависимости: никто | Размер: 1.1kb | Лицензия: N / A
boxLoader
boxLoader - простой плагин для загрузки элементов при прокрутке страницы. Параметр, который вы должны установить, это направления (x или y), положение в процентах, эффект, а также продолжительность.
зависимости: JQuery | Размер: 3.42kb | Лицензия: N / A
Наклонная страница прокрутки
Когда пользователь прокручивает страницу, этот плагин покажет удивительный эффект 3D-наклона для элемента, который вы настроили.
зависимости: JQuery | Размер: 1,5 Кб | Лицензия: GNU GPL
AhRelax
AhRelax позволяет быстро создавать анимацию на основе прокрутки. Это легкий, а также имеет отличную производительность. Вы можете прочитать больше об этом здесь.
зависимости: JQuery | Размер: 1.6kb | Лицензия: MIT
Необычный свиток
Если вы когда-либо видели эффект прокрутки переполнения на Android или iOS, теперь вы можете применить этот плагин к своему сайту. Вы можете добавить анимацию, отскок или свечение, когда пользователь достигает верхней / нижней части страницы.
зависимости: JQuery | Размер: 2.64kb | Лицензия: GNU GPL
Параллакс изображения прокрутки
Этот плагин заставит элементы плавать и двигаться, когда пользователь прокручивает страницу вниз или вверх..
зависимости: JQuery | Размер: 8.69kb | Лицензия: MIT
Rlsmooth
Это небольшой плагин для создания плавного эффекта, когда пользователь прокручивает страницу вниз или вверх. Доступны три эффекта: слайд, исчезновение и шоу.
зависимости: JQuery | Размер: 1.95kb | Лицензия: MIT
Scrollme
Добавляет простые эффекты для прокрутки страницы, такие как масштабирование, поворот, перевод и изменение непрозрачности элементов. Его легко настроить: просто импортируйте jQuery, этот плагин и установите параметры анимации в разметке элемента.
зависимости: JQuery | Размер: 5.45kb | Лицензия: N / A
Параллакс ImageScroll
Этот плагин позволяет придать эффект параллакса любому изображению на вашей странице. Он использует CSS3 Transform, чтобы эффект работал. Этот плагин имеет поддержку jQuery и AMD.
зависимости: JQuery | Размер: 8.01kb | Лицензия: MIT
