Создание анимации при прокрутке страницы при помощи 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 | header.sticky
{
|
Готово! На основе этого примера Вы можете делать абсолютно любые манипуляции с HTML элементами страницы во время прокрутки, все что потребуется jQuery, CSS и Ваши идеи!
Веб меняется каждый день. Появляются и исчезают новые техники. По этой причине веб-дизайнеры и фронтенд-разработчики должно быть знакомы с последними веяниями веб-дизайна. Прокрутка с эффектом параллакса, фиксированные заголовки, одностраничные сайты и анимации - вот некоторые горячие направления в веб-дизайне.
В этой статье мы рассмотрим анимации прокрутки страницы и эффекты на основе CSS и jQuery.
Перед тем, как приступить к реализации эффектов, давайте пробежимся по небольшому введению.
Используемый в этом примере код можно улучшить, применив кеширование объектов, и использовав CSS анимации вместо метода animate() библиотеки jQuery, но для упрощения объявления объектов повторяются, а также все описывается на основе jQuery, чтобы сконцентрировать внимание на концепции.
Что такое эффекты и анимация прокрутки?Анимации прокрутки - это новая, распространяющаяся техника, позволяющая фронтенд-разработчику создавать богатые и интерактивные окружения. Они запускаются, когда пользователь прокручивает страницу.
Для того, чтобы определить, прокручивает ли пользователь страницу, мы используем jQuery событие scroll() .
Зная, что пользователь прокручивает страницу, мы можем определить позицию полосы прокрутки по вертикали с помощью jQuery метода scrollTop() , и применить желаемый эффект:
$(window).scroll(function() { if ($(this).scrollTop() > 0) { // apply effects and animations } });
Являются ли они адаптивными?Если нам нужно реализовать адаптивные эффекты прокрутки, необходимо определить следующие свойства:
Без этих свойств наши эффекты прокрутки будут “статичными”, и не будут правильно работать при изменении пользователем размера окна по вертикали или по горизонтали.
Эти значения легко можно получить с помощью 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 для реализации анимации и эффектов прокрутки.
Сейчас на многих сайтах можно встретить такую анимацию и ниже я тоже покажу пример. Лично я применяю такую анимацию при создании посадочных страниц(лендингов). Многие вебмастера активно применяют на своих сайтах и смотрится такая анимация при прокрутке, довольно красиво.
Чтобы сделать такое у себя на сайте, нужно немного потрудится. Если хоть немного понимать, то сложного ничего нет. Разобьем все наши действия на шаги, чтобы не запутаться.
Шаг 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; }
Трудный путь в пять шагов, преодолен, так что можно посмотреть на результат своего труда. Запутаться можно, но если делать все внимательно, то все получится. Код в статье из примера, так что работает все. Пробуйте применять разные виды анимации, чтобы добиться нужного результата.
На этом все, спасибо за внимание. 🙂
Приветствую, уважаемые друзья. Сегодня я подготовил для вас еще один интересный урок, в котором вы научитесь задавать красивую анимацию для элементов вашего сайта. Мы не будем изучать создание анимации с нуля, а будем использовать готовый скрипт.
Animate.CSS – именно так он называется. В нем собрано множество уже готовых к “употреблению” анимаций. Всё, что нам останется сделать – это подключить их в нужном месте и в нужное время!
Сто процентов, вас сейчас волнует один вопрос:
-Как выглядит Animate.CSS в работе?
Ну что же... отвечу: - Просто замечательно
Ну, а если больше конкретики… Например, всю анимацию на странице тренинга Верстаем на 5+ я реализовал именно при помощи этой штуки. Жмякните на кнопку ниже и попадете на страничку тренинга. Мотайте страницу до самого конца, и увидите, как работает анимация:
А вот это Вы создадите своими руками, если пройдете урок до конца :
Ладно, хватит чесать языком. Пора приступать к телу! Тьфу ты, ёлки-моталки, к делу!!
Урок Animate.CSS + анимация при прокруткеДавно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются
, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге
в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны
, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.
Более детальную информацию можно найти в документации к данному jQuery плагину.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.