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

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

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 и Ваши идеи!

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

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

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

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

Шаг 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; }

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

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

// 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:

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

В этой статье мы рассмотрим анимации прокрутки страницы и эффекты на основе 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 для реализации анимации и эффектов прокрутки.