Топ плагинов jQuery. Плагин jQuery анимация при скроллинге

Топ плагинов jQuery. Плагин jQuery анимация при скроллинге

От автора: приветствую вас, друзья. Говоря о лучших jQuery плагинах, вряд ли получится обойти стороной тему эффекты Parallax, в частности jQuery анимации при скроллинге страницы, когда скрытые ранее объекты появляются на странице один за другим. Выглядят подобные эффекты очень интересно. Давайте попробуем воспроизвести параллакс эффект, используя плагин ScrollMe.

Итак, сегодня мы поработаем с jQuery плагином ScrollMe, который позволяет показывать различные объекты с эффектом jQuery анимации при скролле. Такие штуки особенно популярны на продающих страницах (Landing Page), цель которых удержать пользователя и привлечь его к своему товару или услуге. Такие страницы, как правило, достаточно длинные, и на них анимация при прокрутке страницы выглядит приятно и, что называется — к месту.

Давайте перейдем на официальную страницу плагина и скачаем его. Здесь мы не только сможем наблюдать плагин jQuery анимация при скроллинге в действии, но и, само собой, познакомиться с документацией к нему. Давайте подключим скрипт плагина ScrollMe:

Теперь давайте создадим необходимую разметку. Пусть это будет большой блок текста, после него будет идти искомый объект, к которому и будет применяться эффект Parallax — появление объекта с эффектом Parallax при прокрутке страницы.

Теперь чтобы заработала jQuery анимация при скроллинге страницы, необходимо настроить искомый объект. В частности, необходимо добавить пару классов: scrollme и animateme. Также необходимо добавить ряд атрибутов data-, которые и настроят необходимый нам вариант анимации.

Нужные настройки можно взять прямо из примеров на странице плагина. Выбирайте понравившийся эффект, копируйте его настройки и используйте на свой странице. Например так:

Ну а на сегодня все. Как видите, Parallax анимация в виде jQuery анимации при скролле создается достаточно просто. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: