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

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

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

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

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

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

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

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

Заключение

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