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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.scrollme.js"></script>

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

<div class="container">
 <div class="row">
  <div class="col-md-12">
 <p>Много текста...</p>
  </div>
  <div class="col-md-12">
 <div >
 <code>
 <p>Искомый объект для анимации</p>
 </code>
 </div>
  </div>
  <div class="col-md-12">
 <p>Много текста...</p>

  </div>
 </div>
</div>

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

<div class="scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" >
 <code>
  <p>Искомый объект для анимации</p>
 </code>
</div>
 

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree