Анимация элементов после загрузки страницы. Введение в анимации прокрутки на основе jQuery. Что такое анимация и эффекты при прокрутке страницы

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

Я уже говорил, что плохо знаю 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

Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ 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 : Повторяем анимацию «столько-то раз».

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

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

А теперь давайте посмотрим как выглядит сама структура подгружаемых блоков в HTML:

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

CSS

Таким образом у нас получилась страница, на которой расположено несколько блоков, которые должны при прокрутке вниз плавно подгружаться. Теперь нам нужно придумать 2 класса CSS, которые будут работать если один из блоков окажется в видимом поле браузера:

Hidden{ opacity:0; } .visible{ opacity:1; }

jQuery

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

JQuery(document).ready(function() { jQuery(".post").addClass("hidden").viewportChecker({ classToAdd: "visible animated fadeIn", offset: 100 }); });

Работает данный скрипт следующим образом: если наш блок находится в невидимом поле браузера ему присваивается класс hidden, который скрывает наш блок, после того как наш блок только доходит видимой части окна ему тут же присваивается класс visible вместе с классом от Animate.css, который добавляет красивую анимацию при появлении. Вот и весь секрет:)

Надеюсь Вам понравился данный урок. Пока:)

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

Как же сделать так чтобы анимация запускалась при прокрутке страницы? Об сегодня мы этом и поговорим в нашей статье. Но для начала рекомендуем вам прочитать этот материал . В нем вы узнаете про файл animate.css который позволит вам анимировать ваши элементы и который является неотъемлемой частью нашего сегодняшнего материала.

Итак, для запуска анимации при прокрутки нам понадобиться небольшая JavaScript библиотека под названием WOW.js . Она имеет небольшой набор функций, параметров и дополнительных настроек. Одним из ее плюсов есть то что для ее использования не нужно подключать библиотеку JQuery. В результате что мы получаем, amimate.css файл с набором анимаций и wow.js файл который берет эту анимацию и запускает ее при прокрутке.

Давайте перейдем к подключению этой библиотеки на свой сайт.

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

Первым делом у вас должна быть подключена сама анимация animate.css.

Соответственно вторым пунктом будет подключение WOW.js. Для того чтобы ее активировать нужно, прописать еще дополнительно несколько строк.

new WOW().init();

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

Ваш контент

Как мы уже говорили, библиотека имеет несколько параметров для более подробной настройке анимации.

Дополнительные параметры

data-wow-duration: Изменить длительность анимации;

data-wow-delay: Задержка перед началом анимации;

data-wow-offset: Расстояние для запуска анимации (от нижнего края браузера);

data-wow-iteration: Сколько раз анимация повторяется?

Ваш контент

Ваш контент

При инициализации объекта можно передать объект с параметрами:

Настройка параметров

boxClass: класс для wow-объектов;

animateClass: класс для срабатывания CSS анимации ("animated" для animate.css);

offset: аналогично data-wow-offset, только в глобальном масштабе;

mobile: включить/выключить WOW.js на мобильные устройства.

live: постоянная проверка новых WOW элементов на странице.

wow = new WOW(
{
boxClass: "wow", // default
animateClass: "animated", // default
offset: 0, // default
mobile: true, // default
live: true // default
}
wow.init();

На этом все, инструкция как использовать библиотеку WOW.js для анимирование элементов при прокрутке закончена. Пишите свои отзывы и комментируйте материал. Делитесь с друзьями.

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

Чтобы сделать такое у себя на сайте, нужно немного потрудится. Если хоть немного понимать, то сложного ничего нет. Разобьем все наши действия на шаги, чтобы не запутаться.

Шаг 1

Как всегда, для того чтобы работала библиотека jQuery , надо в шапке перед закрывающимся head или в подвале перед закрывающимсяbody подключить библиотеку.

Шаг 2

//Сюда код

Или создайте файл, например - scriptviewport.js и подключите его.

Внутри тегов или файла добавляем следующий код:

Function(a){a.fn.viewportChecker=function(b){var c={classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function(a,b){},scrollHorizontal:!1};a.extend(c,b);var d=this,e={height:a(window).height(),width:a(window).width()},f=-1!=navigator.userAgent.toLowerCase().indexOf("webkit")?"body":"html";return this.checkElements=function(){var b,g;c.scrollHorizontal?(b=a(f).scrollLeft(),g=b+e.width):(b=a(f).scrollTop(),g=b+e.height),d.each(function(){var d=a(this),f={},h={};if(d.data("vp-add-class")&&(h.classToAdd=d.data("vp-add-class")),d.data("vp-remove-class")&&(h.classToRemove=d.data("vp-remove-class")),d.data("vp-offset")&&(h.offset=d.data("vp-offset")),d.data("vp-repeat")&&(h.repeat=d.data("vp-repeat")),d.data("vp-scrollHorizontal")&&(h.scrollHorizontal=d.data("vp-scrollHorizontal")),d.data("vp-invertBottomOffset")&&(h.scrollHorizontal=d.data("vp-invertBottomOffset")),a.extend(f,c),a.extend(f,h),!d.hasClass(f.classToAdd)||f.repeat){String(f.offset).indexOf("%")>0&&(f.offset=parseInt(f.offset)/100*e.height);var i=f.scrollHorizontal?Math.round(d.offset().left)+f.offset:Math.round(d.offset().top)+f.offset,j=f.scrollHorizontal?i+d.width():i+d.height();f.invertBottomOffset&&(j-=2*f.offset),g>i&&j>b?(d.removeClass(f.classToRemove),d.addClass(f.classToAdd),f.callbackFunction(d,"add")):d.hasClass(f.classToAdd)&&f.repeat&&(d.removeClass(f.classToAdd),f.callbackFunction(d,"remove"))}})},a(document).bind("touchmove MSPointerMove pointermove",this.checkElements),a(window).bind("load scroll touchmove",this.checkElements),a(window).resize(function(b){e={height:a(window).height(),width:a(window).width()},d.checkElements()}),this.checkElements(),this}}(jQuery);

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

Шаг 3

После подключения скрипта задержки, подключаем еще один маленький скрипт, который задает настройки:

jQuery(document).ready(function() { jQuery(".elementanm").addClass("hidden").viewportChecker({ classToAdd: "visible animated slideRight", offset: 100 }); });

В третей строке указан в скобках класс - elementanm . Этот класс нужно будет присваивать всем блокам и элементам, которым Вы захотите присвоить анимацию. В четвертой строке указан класс - slideRight . Это класс анимации. Чтобы задать нужную анимацию и нужный класс, Вам поможет прошлая статья, о которой я упомянул в самом начале. В нашем случаи это будет выезд вправо.

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

jQuery(document).ready(function() { jQuery(".blockanm").addClass("hidden").viewportChecker({ classToAdd: "visible animated slideLeft", offset: 100 }); });

Шаг 4

Как упомянул в предыдущем шаге, нужно элементам задать класс elementanm . В HTML разметке примерно будет так:

Если у Вас уже присвоен элементу класс, то просто добавьте через пробел, например:

Шаг 5

И последним, что нужно сделать - задать CSS стили. Сначала пропишем стили анимации. Берем их с предыдущей статьи о которой уже упоминал в этой статье. Я беру анимацию - выезд вправо.

/*Анимация вправо*/ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 4s; -webkit-animation-duration: 4s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 100% { -webkit-transform: translateX(0%); } }

Как видите, стили анимации имеют класс slideRight, поэтому, этот класс и прописан в скрипте в шаге №3. Также есть значение 4s - это время анимации и равно 4 секундам. Теперь добавим стили для того, чтобы элемент, сначала был невиден.

Hidden{ opacity:0; } .visible{ opacity:1; }

Трудный путь в пять шагов, преодолен, так что можно посмотреть на результат своего труда. Запутаться можно, но если делать все внимательно, то все получится. Код в статье из примера, так что работает все. Пробуйте применять разные виды анимации, чтобы добиться нужного результата.

На этом все, спасибо за внимание. 🙂