Анимация при прокрутке страницы

В этой статье мы рассмотрим топ 10 JavaScript библиотек с открытым исходным кодом для создания анимации при прокрутке страницы (скроллинге), примеры сайтов, созданных на основе данных скриптов, а также wordpress плагины, позволяющих каждому создать данные эффекты на своем сайте!

Скачать исходники для статьи можно ниже

Вот топ 10 JavaScript библиотек с открытым исходным кодом для создания эффектов анимации при скроллинге:

1. CSS3 Animate It
Сайт библиотеки и демонстрация работы скрипта:
«jackonthe.net/css3animateit/»

11-css3-animate-it-library

Есть отличный wordpress плагин — Animate It — сведения о нём:
Количество активных установок: 10,000+
Последнее обновление: 1 неделя назад
Сайт плагина: «wordpress.org/plugins/animate-it/»

Установка плагина стандартная — через админку wordpress (Плагины — Добавить новый — в строку поиска вводим «Animate It»).

После установки при создании Записи/Странички в редакторе вы увидите новую кнопочку:

animation

С помощью, которой вы сможете создать различные эффекты анимации на странице.

Плагин Animate It — подойдёт каждому, так как легок в использовании и интуитивно понятен!

2. WOW.js
Сайт библиотеки и демонстрация работы скрипта:
«mynameismatthieu.com/WOW/»

13-wow-js-javascript-reveal-animation

Прикрутить эффекты скроллинга можно с помощью wordpress плагина — Animate — сведения о нём:
Количество активных установок: 400+
Последнее обновление: 2 неделя назад
Сайт плагина: «wordpress.org/plugins/animate/»

Установка плагина аналогична предыдущему — через панель управления wordpress, использования плагина аналогичное.

3. scrollReveal.js
Сайт библиотеки и демонстрация работы скрипта:
«scrollrevealjs.org/»

09-scroll-reveal-plugin-open-source

Есть wordpress плагин — ScrollReveal.js Effects
Сайт плагина: «wordpress.org/plugins/scrollrevealjs-effects/»
Документация по использованию плагин здесь: «github.com/jlmakes/scrollreveal.js»

4. Scroll Magic
Сайт библиотеки и демонстрация работы скрипта:
«janpaepke.github.io/ScrollMagic/»

10-scroll-magic-js-library-open-source

5. ScrollMe
Сайт библиотеки и демонстрация работы скрипта:
«scrollme.nckprsn.com/»

12-scroll-me-js-javascript-scrolling-animation

6. Skrollr
Сайт библиотеки и демонстрация работы скрипта:
«prinzhorn.github.io/skrollr/»

14-skrollr-website-homepage-open-source

7. Scroll ‘Em
Сайт библиотеки и демонстрация работы скрипта:
«github.com/tsherif/scroll-em»
Демо-версия: «tareksherif.net/»

15-scroll-em-plugin-javascript

8. Story Tale
Сайт библиотеки и демонстрация работы скрипта:
«demonstration.easy-development.com/jquery-story-tale/»

16-story-tale-website-webapp

9. On Scroll Effect
Сайт библиотеки и демонстрация работы скрипта:
«tympanus.net/Blueprints/OnScrollEffectLayout/»

17-on-scroll-effect-blueprint-design

10. Super Scrollorama
Сайт библиотеки и демонстрация работы скрипта:
«johnpolacek.github.io/superscrollorama/»

18-super-scrollorama-plugin-open-source

PS: Другие wordpress плагины для создания эффекта анимации при прокрутке страницы:
— WOW Entrance Effects (WEE!)
— Brainesia Scroll Effect

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *