Скролл-анімація за допомогою JQuery

Що таке скрол-анімація та ефекти?

Скрол-анімація та ефекти - це нова, але вже добре знана техніка, яка дає front-end розробникам можливість створювати гарні інтерактивні веб-інтерфейси.

Щоб розпізнати, коли користувач прокручує сторінку, ми використовуємо Query scroll().

Коли ми знаємо, що юзер прокручує сторінку, ми можемо отримати вертикальну позицію скролбару вікна за допомогою Query 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

Цей ефект залежить не тільки від висоти позіції скрол-бару вікна браузеру, але й від ширини вікна. Для більш коректного відображення, ми робимо наступні припущення:

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

Побачити ефект в дії

Приклад №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 для створення анімації на основі прокрутки та ефекти.

Джерело