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

В этой статье мы рассмотрим топ 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 не будет опубликован. Обязательные поля помечены *