Що таке скрол-анімація та ефекти?
Скрол-анімація та ефекти - це нова, але вже добре знана техніка, яка дає front-end розробникам можливість створювати гарні інтерактивні веб-інтерфейси.
Щоб розпізнати, коли користувач прокручує сторінку, ми використовуємо jQuery scroll().
Коли ми знаємо, що юзер прокручує сторінку, ми можемо отримати вертикальну позицію скролбару вікна за допомогою jQuery scrollTop() і застосувати потрібні ефекти.
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
// apply effects and animations
}
});
```
## **Чи вони адаптивні?**
Якщо ми зацікавлені у створенні адаптивних ефектів прокрутки, ми повинні знати наступні значення: вікна браузера.
1. Значення width вікна браузера.
2. Значення height вікна браузера.
Без цих значень ми зможемо створити скрол-ефекти, які будуть статичними і не будуть коректно відображатись при зміні розміру вікна горизонтально чи вертикально.
Ми можемо з легкістю дізнатись ці значення використовуючи jQuery [width()](http://api.jquery.com/width/) та [height()](http://api.jquery.com/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**
Цей ефект залежить не тільки від висоти позіції скрол-бару вікна браузеру, але й від ширини вікна. Для більш коректного відображення, ми робимо наступні припущення:
1. Якщо значення ширини вікна менше або дорівнює 549px. Тоді анімація спрацьовує тільки тоді, коли верхня позиція вікна прокрутки перевищує 600px.
2. Якщо значення ширини вікна між 550px та 991px. Тоді анімація спрацьовує тільки тоді, коли верхня позиція вікна прокрутки перевищує 480px.
3. Якщо значення ширини вікна більше ніж 991px. Тоді анімація спрацьовую тільки тоді, коли верхня позиція вікна прокрутки перевищує 450px.
Вищезазначені припущення відображені в наступному фрагменті коду:
if ($(window).width() <= 549) {
if($(window).scrollTop() > 600) {
// the animation that's executed
firstAnimation();
}
} else if ($(window).width() > 549 && $(window).width() <= 991) {
if($(window).scrollTop() > 480){
// the animation that's executed
firstAnimation();
}
} else {
if ($(window).scrollTop() > 450) {
// the animation that should be executed
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
[_Побачити ефект в дії_](http://codepen.io/SitePoint/full/ytwKo/)
## **Приклад №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 && $(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**
Цей ефект залежить не тільки від висоти позіції скрол-бару вікна браузеру, але й від ширини вікна. Більш детально:
1. Якщо значення ширини вікна менше або дорівнює 549px. Тоді анімація спрацьовує тільки тоді, коли верхня позиція вікна прокрутки перевищує 3500px.
2. Якщо значення ширини вікна між 550px та 991px. Тоді анімація спрацьовує тільки тоді, коли верхня позиція вікна прокрутки перевищує 2200px.
3. Якщо значення ширини вікна більше ніж 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 для створення анімації на основі прокрутки та ефекти.
Ще немає коментарів