середа , Червень 28 2017

Головні новини
Ви тут: Головна / jQuery / Введення в анімації прокрутки на основі jQuery

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



Веб змінюється щодня. З’являються і зникають нові технології. З цієї причини веб-дизайнери та фронтенд-розробники повинні бути знайомі з останніми віяннями веб-дизайну. Прокрутка з ефектом паралакса, фіксовані заголовки, односторінкові сайти і анімації – ось деякі гарячі напрямки в веб-дизайні.

У цій статті ми розглянемо анімації прокрутки сторінки і ефекти на основі CSS і jQuery, насправді це так просто як купити бленденр в києві sunmart.com.ua/kompyutery-i-po/blendery.

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

Використовуваний в цьому прикладі код можна поліпшити, застосувавши кеширование об’єктів, і використавши CSS анімації замість методу animate() бібліотеки jQuery, але для спрощення оголошення об’єктів повторюються, а також всі описується на основі jQuery, щоб сконцентрувати увагу на концепції.

Що таке ефекти і анімація прокрутки?

Анімації прокрутки – це нова, поширювана техніка, що дозволяє фронтенд-розробнику створювати багаті та інтерактивні оточення. Вони запускаються, коли користувач прокручує сторінку.

Для того, щоб визначити, чи прокручує користувач сторінку, ми використовуємо jQuery подію scroll().

Знаючи, що користувач прокручує сторінку, ми можемо визначити позицію смуги прокрутки по вертикалі за допомогою jQuery методу scrollTop(), і застосувати бажаний ефект:

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    //apply effects and animations
  }
});

Чи є вони адаптивними?

Якщо нам потрібно реалізувати адаптивні ефекти прокрутки, необхідно визначити наступні властивості:

Властивість вікна браузера width;
Властивість вікна браузера 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 , який спочатку прихований.

Цей код також можна було написати так:

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



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers