В этой статье мы рассмотрим топ 10 JavaScript библиотек с открытым исходным кодом для создания анимации при прокрутке страницы (скроллинге), примеры сайтов, созданных на основе данных скриптов, а также wordpress плагины, позволяющих каждому создать данные эффекты на своем сайте!
Скачать исходники для статьи можно ниже
Вот топ 10 JavaScript библиотек с открытым исходным кодом для создания эффектов анимации при скроллинге:
1. CSS3 Animate It
Сайт библиотеки и демонстрация работы скрипта:
“jackonthe.net/css3animateit/”
Есть отличный wordpress плагин – Animate It – сведения о нём:
Количество активных установок: 10,000+
Последнее обновление: 1 неделя назад
Сайт плагина: “wordpress.org/plugins/animate-it/”
Установка плагина стандартная – через админку wordpress (Плагины – Добавить новый – в строку поиска вводим “Animate It”).
После установки при создании Записи/Странички в редакторе вы увидите новую кнопочку:
С помощью, которой вы сможете создать различные эффекты анимации на странице.
Плагин Animate It – подойдёт каждому, так как легок в использовании и интуитивно понятен!
2. WOW.js
Сайт библиотеки и демонстрация работы скрипта:
“mynameismatthieu.com/WOW/”
Прикрутить эффекты скроллинга можно с помощью wordpress плагина – Animate – сведения о нём:
Количество активных установок: 400+
Последнее обновление: 2 неделя назад
Сайт плагина: “wordpress.org/plugins/animate/”
Установка плагина аналогична предыдущему – через панель управления wordpress, использования плагина аналогичное.
3. scrollReveal.js
Сайт библиотеки и демонстрация работы скрипта:
“scrollrevealjs.org/”
Есть wordpress плагин – ScrollReveal.js Effects
Сайт плагина: “wordpress.org/plugins/scrollrevealjs-effects/”
Документация по использованию плагин здесь: “github.com/jlmakes/scrollreveal.js”
4. Scroll Magic
Сайт библиотеки и демонстрация работы скрипта:
“janpaepke.github.io/ScrollMagic/”
5. ScrollMe
Сайт библиотеки и демонстрация работы скрипта:
“scrollme.nckprsn.com/”
6. Skrollr
Сайт библиотеки и демонстрация работы скрипта:
“prinzhorn.github.io/skrollr/”
7. Scroll ‘Em
Сайт библиотеки и демонстрация работы скрипта:
“github.com/tsherif/scroll-em”
Демо-версия: “tareksherif.net/”
8. Story Tale
Сайт библиотеки и демонстрация работы скрипта:
“demonstration.easy-development.com/jquery-story-tale/”
9. On Scroll Effect
Сайт библиотеки и демонстрация работы скрипта:
“tympanus.net/Blueprints/OnScrollEffectLayout/”
10. Super Scrollorama
Сайт библиотеки и демонстрация работы скрипта:
“johnpolacek.github.io/superscrollorama/”
PS: Другие wordpress плагины для создания эффекта анимации при прокрутке страницы:
– WOW Entrance Effects (WEE!)
– Brainesia Scroll Effect