Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и front-end разработчики должны быть в курсе последних тенденций в веб-дизайне. Parallax-прокрутка, фиксированные заголовки, плоский дизайн, одностраничные сайты и CSS-анимация некоторые из самых горячих веб-тенденций на текущий момент.
В этом уроке мы рассмотрим создание анимации и эффектов при прокрутке страницы с помощью CSS и jQuery.
Четыре эффекта, которые мы будем создавать можно увидеть на этой странице.
Примечание: Код, используемый в этом уроке можно было бы улучшить при помощи кэширования объектов и использования CSS анимации вместо метода jQuery 'animate()', но для простоты мы сконцентрируемся в первую очередь на идее.
Что такое анимация и эффекты при прокрутке страницы?
Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.
Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll().
После того, как мы узнаем, что пользователь прокручивает страницу, мы можем получить вертикальное положение полосы прокрутки с помощью метода scrollTop() и применить нужные эффекты:
if ($(this).scrollTop() > 0) {
// создаем эффекты и анимацию
}
});
Являются ли они адаптивными?
Если мы заинтересованы в создании адаптивных эффектов (оптимизированных под разные разрешения экрана), то мы должны определить следующие свойства:
- Свойство width - ширина окна браузера.
- Свойство height - высота окна браузера.
Без определения этих свойств мы создадим эффекты которые будут "статичными" и не будут работать правильно, если пользователь изменит размер окна горизонтально или вертикально.
Мы можем легко получить значения этих свойств с помощью методов width() и height().
Следующий фрагмент кода показывает все необходимые проверки, которые мы должны принять во внимание, чтобы создать эффекты при прокрутке страницы.
if ($(this).width() < 992) {
if ($(this).height() <= 768) {
if ($(this).scrollTop() < 500) {
// создаем эффекты
}
if($(this).scrollTop() > 1000) {
// создаем эффекты
}
}
}
});
Теперь, когда мы рассмотрели основы создания подобных эффектов, давайте посмотрим их в действии, на четырех различных примерах.
Пример #1
Этот эффект срабатывает, когда верхнее положение полосы прокрутки окна превышает 60px. В таком случае выполняется следующий фрагмент кода:
$('.banner h2').css('display', 'none');
$('.banner .info').css('display', 'block');
} else {
$('.banner h2').css('display', 'block');
$('.banner .info').css('display', 'none');
}
Код выше скрывает дочерний элемент h2 внутри элемента с классом .banner и показывает его дочерний элемент .info, который был первоначально скрыт.
Этот код также может быть записан следующим образом:
$('.banner h2').hide();
$('.banner .info').show();
} else {
$('.banner h2').show();
$('.banner .info').hide();
}
Чтобы увидеть эффект в действии посмотрите демонстрацию на CodePen.
Пример #2
Следующий эффект зависит не только от верхней позиции полосы прокрутки браузера, но и от ширины окна. В частности, мы делаем следующие предположения:
- Ширина окна имеет значение меньше или равно 549px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 600px.
- Ширина окна имеет значение между 550px и 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 480 пикселей.
- Ширина браузера имеет значение больше 991px. В таком случае, анимация срабатывает только тогда, когда верхнее положение полосы прокрутки окна превышает 450px.
Вышеупомянутые предположения реализованы в следующем фрагменте кода:
if($(window).scrollTop() > 600) {
// анимация, которая должны быть выполнена
firstAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if($(window).scrollTop() > 480){
// анимация, которая должны быть выполнена
firstAnimation();
}
} else {
if ($(window).scrollTop() > 450) {
// анимация, которая должны быть выполнена
firstAnimation();
}
}
Код, который содержит анимацию, которая будет выполнена, следующий:
$('.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).scrollTop() > 1750){
secondAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if ($(window).scrollTop() > 1150) {
secondAnimation();
}
} else {
if ($(window).scrollTop() > 850) {
secondAnimation();
}
}
Код, который содержит анимацию, следующий:
$('.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).scrollTop() > 3500) {
thirdAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if ($(window).scrollTop() > 2200) {
thirdAnimation();
}
} else {
if ($(window).scrollTop() > 1600) {
thirdAnimation();
}
}
Код для анимации следующий:
$('.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
ВКонтакте
Подробнее...