Создание анимации при прокрутке страницы при помощи jQuery. Создание анимации при прокрутке страницы при помощи jQuery Подключение через скачивание архива

На странице. Тенденция, которая популярна в последнее время — это анимационное изменение элементов при прокрутке страницы. В данной статье мы создадим заголовок в самом верху страницы и в момент скроллинга будет происходить плавное изменение размера и цвета заголовка.

Вот как это будет выглядеть в итоге:

HTML разметка

HTML для нашего примера наипростейшее, все что нам нужно это заголовок h1 внутри элемента header . А для наглядности примера добавим картинку с призом к действию =)

jQuery

Для начала, давайте добавим стили по-умолчанию, которые улучшают внешний вид заголовка:

Сразу хочу заметить CSS transition задается в стиле по-умолчанию. Из конструкции свойства transition видно, что мы изменяем все свойства элемента (transition-property — all ), за 0.4 секунды (transition-duration — 0.4s ), с ускорением ease (transition-timing-function — ease ).

Теперь описываем класс sticky, применяемый к заголовку во время прокрутки. Есть несколько вещей, которые мы хотим сделать с заголовком: во-первых, необходимо чтобы заголовок стал меньше, а также должен измениться цвет фона и текст выровняться по левому краю:

1 2 3 4 5 6 7 8 9 10

header.sticky { position : fixed ; font-size : 24px ; line-height : 48px ; height : 48px ; width : 100% ; background : #efc47D ; text-align : left ; padding-left : 20px ; }

Готово! На основе этого примера Вы можете делать абсолютно любые манипуляции с HTML элементами страницы во время прокрутки, все что потребуется jQuery, CSS и Ваши идеи!

Приветствую, уважаемые друзья. Сегодня я подготовил для вас еще один интересный урок, в котором вы научитесь задавать красивую анимацию для элементов вашего сайта. Мы не будем изучать создание анимации с нуля, а будем использовать готовый скрипт.

Animate.CSS – именно так он называется. В нем собрано множество уже готовых к “употреблению” анимаций. Всё, что нам останется сделать – это подключить их в нужном месте и в нужное время!

Сто процентов, вас сейчас волнует один вопрос:

-Как выглядит Animate.CSS в работе?

Ну что же... отвечу: - Просто замечательно

Ну, а если больше конкретики… Например, всю анимацию на странице тренинга Верстаем на 5+ я реализовал именно при помощи этой штуки. Жмякните на кнопку ниже и попадете на страничку тренинга. Мотайте страницу до самого конца, и увидите, как работает анимация:

А вот это Вы создадите своими руками, если пройдете урок до конца :

Ладно, хватит чесать языком. Пора приступать к телу! Тьфу ты, ёлки-моталки, к делу!!

Урок Animate.CSS + анимация при прокрутке

Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery . Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...

С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.

Анимация при скроллинге: комбинация
«WOW.js » и «Animate.css »
на WordPress...

* чтобы повторить анимацию, перезагрузите страницу.

Как настроить?

ШАГ 1
Для начала скачайте эти два файла («WOW.js» и «Animate.css»)

ОБНОВЛЕНО (25.июль.2019):
wow.min.js v1.2.1 | animate.min.css v3.7.2
ШАГ 2
Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).

ШАГ 3
Помещаем в эту строку:

* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл - скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂

ШАГ 4
Помещаем в самый низ страницы перед эти строки:

new WOW ().init();

* Тоже укажите правильный путь к файлу и проверьте в браузере.

Определенная информация

ШАГ 6
Продвинутые настройки. Добавляем функции:
data-wow-duration : Меняем продолжительность анимации;
data-wow-delay : Задержка перед началом анимации;
data-wow-offset : Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration : Повторяем анимацию «столько-то раз».

Определенная информация Определенная информация

Мы делали анимацию элементов, используя библиотеку animate.css . CSS анимация отрабатывала сразу, после загрузки страницы и останавливалась, что является большим недостатком, если страница длинная.

Демо-пример с animate.css

Покручивая длинный лендинг, пользователь просто не успевает увидеть анимацию всех секций, ведь библиотека animate.css уже быстренько отработала. Что же делать? Как заставить анимацию продолжать работать при прокрутке страницы, реагируя на новые секции с элементами.

Как гласит народная мудрость, если мало одной библиотеки, то добавь ещё одну.

Подключение плагина wow.js

Сайт: https://github.com/matthieua/WOW

Нужно сделать так, чтобы анимация срабатывала только тогда, когда мы прокручиваем страницу. Для этого и существует плагин wow.js , для работы которого не нужен jQuery . Обратите внимание, что файл animate.css , тоже должен быть подключен и классы у тегов прописаны, об этом было сказано в начале статьи.

Запомните! Animate.css и wow.js работают в паре!

Независимо от способа подключения, прописываем ссылку на JS файл перед закрывающим тегом body , в теге script . Запускает плагин функция - new WOW().init()

Подключение через CDN

new WOW().init();
Подключение через скачивание архива

Скачиваете архив с github и перекладываете файл wow.min.js из скачанной архивной папки dist папку js с вашим проектом.

new WOW().init();

Чтобы анимация на сайте сработала, необходимо добавить к тегам элементов, которые собираетесь анимировать - класс wow , вместо класса animated . Замена классов касается тех, кто на сайте использовал только одну библиотеку animate.css , но решил добавить ещё плагин wow.js . Если вы сразу установили оба файла, то просто прописываете wow и название анимации.

Было так:

А стало так:

Теперь анимация запускается при прокрутке страницы , по ходу движения вниз, по мере появления новых элементов на странице.

Дополнительные опции

Теперь давайте рассмотрим дополнительные опции, которые можно использовать в наших анимациях. Для этого посмотрим, что есть в документации, из четырех опций я реально использую только две. Остальные на мой взгляд бесполезные и даже вредные.

Атрибут data-wow-duration задает продолжительность анимации в секундах, иногда необходимо замедлить анимацию, сделать её более плавной. Атрибут data-wow-offset устанавливает на каком расстояние от нижнего края браузера, следует запустить анимацию.

Допустим, вы хотите, чтобы анимация длилась 1 секунду. Добавляете к классу тега соответствующий параметр.

How it works

Демо-пример с animate.css+wow.js

Где на практике лучше всего применять комбинацию animate.css + wow.js ? Там, где вы активно продвигаете товар или услугу, такая подача информации привлечет больше клиентов. Самый главный потребитель анимаций при прокручивании страницы – это лендинг. Есть одно но, прежде чем повесить на него анимацию, надо сперва научиться профессионально создавать лендинги, хотя бы из этого видеокурса .Обратите внимание, как привлекательно анимирована сама продающая страница видео-курса.

Веб меняется каждый день. Появляются и исчезают новые техники. По этой причине веб-дизайнеры и фронтенд-разработчики должно быть знакомы с последними веяниями веб-дизайна. Прокрутка с эффектом параллакса, фиксированные заголовки, одностраничные сайты и анимации - вот некоторые горячие направления в веб-дизайне.

В этой статье мы рассмотрим анимации прокрутки страницы и эффекты на основе CSS и jQuery.

Перед тем, как приступить к реализации эффектов, давайте пробежимся по небольшому введению.

Используемый в этом примере код можно улучшить, применив кеширование объектов, и использовав CSS анимации вместо метода animate() библиотеки jQuery, но для упрощения объявления объектов повторяются, а также все описывается на основе jQuery, чтобы сконцентрировать внимание на концепции.

Что такое эффекты и анимация прокрутки?

Анимации прокрутки - это новая, распространяющаяся техника, позволяющая фронтенд-разработчику создавать богатые и интерактивные окружения. Они запускаются, когда пользователь прокручивает страницу.

Для того, чтобы определить, прокручивает ли пользователь страницу, мы используем jQuery событие scroll() .

Зная, что пользователь прокручивает страницу, мы можем определить позицию полосы прокрутки по вертикали с помощью jQuery метода scrollTop() , и применить желаемый эффект:

$(window).scroll(function() { if ($(this).scrollTop() > 0) { // apply effects and animations } });

Являются ли они адаптивными?

Если нам нужно реализовать адаптивные эффекты прокрутки, необходимо определить следующие свойства:

Свойство окна браузера width ;

Свойство окна браузера height .

Без этих свойств наши эффекты прокрутки будут “статичными”, и не будут правильно работать при изменении пользователем размера окна по вертикали или по горизонтали.

Эти значения легко можно получить с помощью jQuery методов width() и height() .

Следующий фрагмент кода демонстрирует необходимые проверки для реализации эффекта прокрутки.

$(window).scroll(function() { if ($(this).width() < 992) { if ($(this).height() 1000) { // apply effects } } } });

Теперь, когда мы определились с основами эффектов прокрутки, давайте посмотрим на них в действии на основе четырех примеров.

Для упрощения мы фокусируемся только на проверке того, как эффекты будут меняться в зависимости от различных значений свойств окна width и height .

Пример №1

Этот эффект запускается, когда верхняя позиция полосы прокрутки превышает 60px. В этом случае выполняемый фрагмент кода выглядит следующим образом:

If ($(window).scrollTop() > 60) { $(".banner h2").css("display", "none"); $(".banner .info").css("display", "block"); } else { $(".banner h2").css("display", "block"); $(".banner .info").css("display", "none"); }

Вышеприведенный код прячет элемент h2 из элемента с классом.banner , и отображает дочерний элемент.info , который изначально скрыт.

Этот код также можно было написать следующим образом:

If ($(window).scrollTop() > 60) { $(".banner h2").hide(); $(".banner .info").show(); } else { $(".banner h2").show(); $(".banner .info").hide(); }

Пример №2

Следующий пример зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 600px.
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 480px.
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 450px.

If ($(window).width() 600) { // запускаемая анимация firstAnimation(); } } else if ($(window).width() > 549 && $(window).width() 480){ // запускаемая анимация firstAnimation(); } } else { if ($(window).scrollTop() > 450) { // запускаемая анимация firstAnimation(); } }

Код запускаемой анимации выглядит следующим образом:

Var firstAnimation = function () { $(".clients .clients-info").each(function () { $(this).delay(500).animate({ opacity: 1, height: "180", width: "250" }, 2000); }); };

Вышеприведенный код анимирует свойства opacity , height и width элементов.clients-info .

Пример №3

Третий эффект зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 1750px;
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 1150px;
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 850px.

Код для вышеприведенных случаев представлен ниже:

If ($(window).width() 1750){ secondAnimation(); } } else if ($(window).width() > 549 && $(window).width() 1150) { secondAnimation(); } } else { if ($(window).scrollTop() > 850) { secondAnimation(); } }

Код выполняемой анимации выглядит следующим образом:

Var secondAnimation = function() { $(".method:eq(0)").delay(1000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(1)").delay(2000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(2)").delay(3000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); $(".method:eq(3)").delay(4000).animate({ opacity: 1 }, "slow", function() { $(this).find("h4").css("background-color", "#b5c3d5"); }); };

Вышеприведенный код последовательно изменяет свойство opacity элементов.method , а затем меняет свойство background-color дочерних элементов h4 .

Пример №4

Этот эффект зависит не только от позиции полосы прокрутки, но также и от ширины окна. В частности, есть следующие условия:

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 3500px;
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 2200px;
• Ширина окна больше 991px. В этом случае анимация запускается только когда положение полосы прокрутки превышает 1600px.

Результаты в следующем коде:

If ($(window).width() 3500) { thirdAnimation(); } } else if ($(window).width() > 549 && $(window).width() 2200) { thirdAnimation(); } } else { if ($(window).scrollTop() > 1600) { thirdAnimation(); } }

Код анимации следующий:

Var thirdAnimation = function() { $(".blogs").find("p").delay(1400).animate({ opacity: 1, left: 0 }, "slow"); $(".blogs").find("img").delay(2000).animate({ opacity: 1, right: 0 }, "slow"); $(".blogs").find("button").delay(2500).animate({ opacity: 1, bottom: 0 }, "slow"); };

Вышеприведенный код последовательно анимирует свойства opacity , left , right и bottom элементов p , img , button .

Заключение

Надеюсь, представленные здесь примеры хорошо демонстрируют, как можно использовать jQuery для реализации анимации и эффектов прокрутки.