Анимация при прокрутке страницы с использованием jQuery

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

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

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

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

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

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

После того, как пользователь прокрутит страницу вниз, мы можем получить вертикальную позицию скрола окна с помощью метода jQuery 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 и показывается элемент .info, который был до этого скрыт. Этот код также можно записать следующим образом:

if ($(window).scrollTop() > 60) {
    $(".banner h2").hide();
    $(".banner .info").show();
} else {
    $(".banner h2").show();
    $(".banner .info").hide();                               
}

Этот эффект в действии смотрите тут или ниже:

Пример 2

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

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

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

if ($(window).width() <= 549) {
    if($(window).scrollTop() > 600) {
        // анимация
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(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);
        }
    );
};

Вышеприведенный код анимирует свойства opacity, height и width. Эффекты в работе смотрите тут.

Пример 3

Эффект зависит от верхней позиции полосы прокрутки окна и от ширины окна. Cделаем следующие ограничения:

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

Используем это все в следующем коде:

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

Вышеприведенный код анимирует свойства opacity и затем изменяет свойство background-color элементов h4.

Эффекты в работе смотрите в этой демонстрации.

Пример 4

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

Если значение ширины окна width меньше или равно 549px, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 3500px.
Если значение ширины окна width находится между 550px и 991px, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 2200px.
Если значение ширины окна 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.

Демо смотрите тут (в отдельном окне)

Заключение

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

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