Как в jquery сделать скролл без анимации. Введение в анимации прокрутки на основе jQuery

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

Приветствую. Сегодня мы научимся делать анимацию элементов на странице, и отображать анимацию при прокрутке страницы. В этом уроке будем работать с библиотеками animate.css и wow.js. Также этот урок записан в видео, и у блога появился канал на youtube. Поэтому новые уроки будут сопровождаться видео материалами. Поехали!

Для начала я подготовил html страницу с простыми элементами (заголовками и картинками) которые будем анимировать. Вот HTML код страницы:

Заголовок первый Заголовок второй Заголовок третий Заголовок четвертый Заголовок пятый

И простая CSS разметка:

Section { width: 80%; text-align: center; position: relative; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; } section h1 { font-size: 32px; font-weight: bold; margin: 20px 0 50px; text-transform: uppercase; } section .col { width: 30%; margin: 0 1% 50px; display: inline-block; }

Как видим все действительно очень просто.

Подключаем animate.css. Делаем анимацию элементов

Скачиваем библиотеку animate.css. Я положил файл animate.min.css в папку /libs в рядом с html страницей. Подключаем animate.min.css как обычный css файл, между теами .

Теперь к элементам, которым необходимо применить анимацию надо добавить нужные классы css стилей.Необходимо добавить класс animated и класс с названием анимации, напимер swing. Вот что получится в итоге, для заголовка h1:

Заголовок первый

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

Заголовок первый

Мы добавили классы animated для заголовка, и для каждой колонки, теперь при загрузке страницы они будут воспроизводить анимацию. Аналогично можно добавить анимацию и к остальным элементам страницы. Но есть небольшая проблема, вся анимация будет воспроизводиться при загрузке страницы. И при прокрутке к элементам, которые находятся за пределами первого экрана, мы уже не увидим анимацию, так как она уже произошла, когда страница была загружена. Чтобы показывать анимацию только тогда, когда элемент находится в зоне видимости, нужно подключить библиотеку wow.js

Подключение библиотека wow.js для анимации при прокрутке страницы

Библиотека wow.js была специальна сделана, чтобы работать в паре с библиотекой animate.css. Работает она так, что анимация элементов срабатывает не при загрузке страницы, а тогда когда эти элементы попадают в зону видимости, то есть при прокрутке страницы.

Для подключения библиотеки я поместил файл wow.min.js в паgre /libs рядом со страницей, и подключаю его как обычный js скрипт. Также после подключения, эту библиотеку необходимо инициализировать. Подключать wow.js следует после подключения jquery. Это обязательное условие.

new WOW().init();

Теперь когда библиотека подключена, переходим к редактированию кода. Для применения работы wow.js для элементов, необходимо добавить класс wow. Кстати ним можно заменить класс animated. Получается вот так.

Заголовок первый

Заголовок первый

Изменив на всех элементах с анимацией animated на wow, мы увидим что теперь анимация элементов срабатывает при прокрутке страницы, а не при загрузке.

Также библиотека wow.js содержит дополнительные настройки. Посмотреть их можно в документации на сайте данной библиотеки. Например можно добавить задержку в анимации. Задается она html5 параметром data-wow-delay=»1s». Вместо 1s, можно указать свое значение задержки. Я выставил задержку для элементов первого раздела так, что анимация каждого элемента будет начинаться после предыдущего, и вот что получилось:

Заголовок первый

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

Референсы для урока
Библиотека 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 : Повторяем анимацию «столько-то раз».

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

Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются , выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны , но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

WOW.jsНеплохой плагин для реализации анимации элементов при скроллинге . Он имеет очень много анимированных вариантов появления блоков и довольно легко настраивается. ScrollMagicЕще один популярный плагин, с помощью которого можно реализовать сложную анимацию, которая будет срабатывать при прокрутке ролика мышки . В данном случае, плагин позволяет делать действительно сложные , эффекты движения, смены фона на страница и вообще деформации фигур. ScrollMagic часто используют на промо-сайтах, где требуется много анимировать.

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

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

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

OnePagejQuery плагин OnePage позволяет разбить страницу на отдельные экраны с высотой 100% и анимировать переход по ним. Требуется лишь легкий толчок, чтобы начался скроллинг к следующему экрану. Такой же эффект использовался на промо-сайте 5s.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.

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

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

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

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

Scrolling Progress BarИнтересное решение, с помощью которого можно показать прогресс прочтения информации на странице. Также есть возможность разбить текст на разделы и все это будет визуально выводиться в любом удобном для вас месте на странице.

multiScroll.jsmultiScroll.js - это jQuery плагин, похож на два предыдущих плагина скользких экранов , но имеет одно значительное отличие. Если в предыдущих случаях просто перелистывался экран, то этот больше похож на современный слайдер изображений . Экран разделяется на две равных части и левая перелистывается вверх, а правая вниз. Таким образом контент практически разрывается.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.

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

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

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

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

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

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

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

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

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

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

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

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

Я уже говорил, что плохо знаю javascript (в процессе изучения), и самому реализовать данный функционал мне не удалось. Но к счастью я нашел готовое решение на другом сайте. Придумал его Артем Анашев, один из авторов на блоге loftblog.ru . Там материал, по этой теме, представлен исключительно в видеоформате, я же попробую описать все в текстовом и выложить свой исходинк. Если вам удобнее смотреть именно видеоматериал, то в конце статьи можете ознакомиться с оригиналом:)

Как и в прошлый раз скачиваем и подключаем библиотеку animate.css , там же можно подбирать тип анимации в удобном визуальном исполнении:

В данной статье я буду использовать не оптимизированную версию библиотеки annimate.css, но вам рекомендую подключать именно animate.min.css , скачанную с github. Так как эта версия меньше весит, а соответственно будет грузиться быстрее.

Я поместил ее в папку «css», поэтому получился следующий путь:

Теперь необходимо подключить jquery и плагин waypoints, который поможет нам прокручивать анимацию в обе стороны:

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

Как и в видео ниже, предлагаю сделать такую структуру, чтобы три элемента, расположенные друг за другом (в ряд), плавно появлялись с небольшой задержкой, а затем, также плавно исчезали. Я создал небольшой макет с крупными иконками, которые и будут анимироваться:

Внимание! Тестировать эффект необходимо на локальном или внешнем сервере. В противном случае анимация не будет проигрываться.

Анимация при скролле в обе стороны — html разметка

Я создал класс «box», в котором буду хранить свои изображения.

Здесь нет ничего особенного, просто задаю ширину и высоту области, в которой буду хранить иконки. Делаю отступ слева 50px и выравниваю по левому краю. Этот блок сугубо индивидуален и можете не обращать на него внимание. Просто под мой макет лучше всего подходили именно эти параметры. Идем дальше.

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

Класс boxHidded, нужен для того, чтобы сделать, в начальный момент времени наши иконки полностью прозрачными. Это подразумевает логика нашего скрипта. Ведь иконки, при прокрутке должны плавно появиться, а затем также плавно исчезнуть.

BoxHidded{ visibility: hidden; /* Делаем иконки полностью прозрачными */ } .fadeInUp, .fadeOutDown{ visibility: visible; /* Делаем иконки полностью не прозрачными */ }

Класс delay-05s и delay-1s отвечает за задержку в проигрывании анимации на 0.5 секунды и 1 секунду соответственно. Давайте рассмотрим свойства, заданные этим классам:

Delay-05s{ -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } .delay-1s{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }

На этом работа с таблицей стилей закончена, нам осталось перед закрывающимся тегом body разместить следующий скрипт

$(".box") .waypoint(function(dir) { if (dir === "down") $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); else $(this) .removeClass("fadeInUp") .addClass("fadeOutDown"); }, { offset: "80%" }) .waypoint(function(dir) { if (dir === "down") $(this) .removeClass("fadeInUp") .addClass("fadeOutDown"); else $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); }, { offset: -50 })

Обратите внимание на строки:

RemoveClass("fadeOutDown") .addClass("fadeInUp");

В них мы добавляем и удаляем классы, отвечающие за стили анимации, которые будут проигрываться при прокрутке. В данном случае fadeInUp и fadeOutDown. Вы можете выбрать любые виды анимации, представленные на официальной страничке библиотеки animate.css.

Чтобы изменить момент, в который должна начать проигрываться анимация — изменяйте значение offset. В данном случае задано 80%. Как я понял, это расстояние от верхней точки экрана, до блока, который анимируем.

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

В данном случае — эта проблема решена. Первый offset отвечает за старт анимации. А второй за исчезновение блоков. То есть, когда становится не видно 50 пикселей анимированого контента. Попробуйте! На примере вы все поймете.

dimadv7