Создание анимации при прокрутке страницы при помощи jQuery

Создание анимации при прокрутке страницы при помощи jQuery

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

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

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

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

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

Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.

Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll().

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

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // создаем эффекты и анимацию
    }
});

Являются ли они адаптивными?

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

  • Свойство width - ширина окна браузера.
  • Свойство height - высота окна браузера.

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

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

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

$(window).scroll(function() {
    if ($(this).width() < 992) {
        if ($(this).height() <= 768) {
            if ($(this).scrollTop() < 500) {
                // создаем эффекты
            }
            if($(this).scrollTop() > 1000) {
            // создаем эффекты
            }
        }
    }
});

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

Пример #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();                              
}

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

Пример #2

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

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

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

if ($(window).width() <= 549) {
    if($(window).scrollTop() > 600) {
        // анимация, которая должны быть выполнена
        firstAnimation();
    }
} else if ($(window).width() > 549 &amp;&amp; $(window).width() <= 991) {
    if($(window).scrollTop() > 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);
        }
    );
};

Код выше анимирует свойства непрозрачности, высоту и ширину для элемента .clients-info.

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

Пример #3

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

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

И вот код:

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

Код выше последовательно анимирует свойство opacity для элементов .method, а затем меняет цвет фона дочерних элементов h4.

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

Пример #4

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

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

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

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

Заключение

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

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

Перевод статьи с http://www.sitepoint.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments