Введение в анимации прокрутки на основе jQuery

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

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

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

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

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

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

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

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

$(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

Этот эффект запускается, когда верхняя позиция полосы прокрутки превышает 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() <= 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 элементов .clients-info.

Пример №3

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

• Ширина окна составляет 549px или менее. В этом случае анимация запускается только в том случае, когда позиция полосы прокрутки превышает 1750px;
• Ширина окна находится в промежутке между 550px и 991px. В этом случае анимация запускается только тогда, когда положение полосы прокрутки превышает 1150px;
• Ширина окна больше 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 элементов .method, а затем меняет свойство background-color дочерних элементов h4.

Пример №4

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

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

Заключение

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