Статьи

Введение в анимацию на основе jQuery Scroll

Ноябрь 10, 2018

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

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

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

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

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

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

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

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

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

Они отзывчивы?

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

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

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

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

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

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

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

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

Пример № 1

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

 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(); }

Чтобы увидеть эффект в действии, посмотрите полную демонстрацию на CodePen .

Пример № 2

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

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

Вышеупомянутые предположения приводят к следующему фрагменту кода: 

 if ($(window).width() <= 549) { if($(window).scrollTop() > 600) { // the animation that's executed firstAnimation(); } } else if ($(window).width() > 549 && $(window).width() <= 991) { if($(window).scrollTop() > 480){ // the animation that's executed firstAnimation(); } } else { if ($(window).scrollTop() > 450) { // the animation that should be executed 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 .

Чтобы увидеть этот эффект в действии, посмотрите полную демонстрацию на CodePen .

Пример № 3

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

  1. Свойство width окна имеет значение, меньшее или равное 549px. В таком случае анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 1750 пикселей.
  2. Свойство width окна имеет значение между 550px и 991px. В таком случае анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 1150 пикселей.
  3. Свойство width окна имеет значение больше 991px. В таком случае анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 850 пикселей.

И вот код, основанный на вышеупомянутом: 

 if ($(window).width() <= 549){ if($(window).scrollTop() > 1750){ secondAnimation(); } } else if ($(window).width() > 549 && $(window).width() <= 991) { if ($(window).scrollTop() > 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'); } ); };

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

Чтобы увидеть эффект в действии, посмотрите полную демонстрацию на CodePen .

Пример № 4

Этот эффект зависит не только от верхней позиции полосы прокрутки окна, но и от свойства width окна. Более конкретно:

  1. Если свойство width окна имеет значение, меньшее или равное 549px, анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 3500px.
  2. Если свойство width окна имеет значение между 550px и 991px, анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 2200px.
  3. Если свойство width окна имеет значение больше 991px, анимация запускается только тогда, когда верхняя позиция полосы прокрутки окна превышает 1600px.

Это приводит к следующему коду: 

 if ($(window).width() <= 549) { if ($(window).scrollTop() > 3500) { thirdAnimation(); } } else if ($(window).width() > 549 && $(window).width() <= 991) { if ($(window).scrollTop() > 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 .

Чтобы увидеть эффект в действии, посмотрите полную демонстрацию на CodePen .

Вывод

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

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

35
Share: