Веб змінюється щодня. З'являються і зникають нові техніки. З цієї причини веб-дизайнери та фронтенд-розробники повинно бути знайомі з останніми віяннями веб-дизайну. Прокрутка з ефектом паралакса, фіксовані заголовки, односторінкові сайти і анімації - ось деякі гарячі напрямки в веб-дизайні.
У цій статті ми розглянемо анімації прокрутки сторінки і ефекти на основі CSS і jQuery.
Перед тим, як приступити до реалізації ефектів, давайте пробіжимося по невеликому введенню.
Що таке ефекти і анімація прокрутки?
Анімації прокрутки - це нова, поширювана техніка, що дозволяє фронтенд-розробнику створювати багаті і інтерактивні оточення. Вони запускаються, коли користувач прокручує сторінку.
Для того, щоб визначити, прокручує користувач сторінку, ми використовуємо jQuery подія scroll ().
Знаючи, що користувач прокручує сторінку, ми можемо визначити позицію смуги прокрутки по вертикалі за допомогою jQuery методу scrollTop (). і застосувати бажаний ефект:
Чи є вони адаптивними?
Якщо нам потрібно реалізувати адаптивні ефекти прокрутки, необхідно визначити наступні властивості:
- Властивість вікна браузера width;
- Властивість вікна браузера height.
Без цих властивостей наші ефекти прокрутки будуть "статичними", і не будуть правильно працювати при зміні користувачем розміру вікна по вертикалі або по горизонталі.
Ці значення легко можна отримати за допомогою jQuery методів width () і height ().
Наступний фрагмент коду демонструє необхідні перевірки для реалізації ефекту прокрутки.
Тепер, коли ми визначилися з основами ефектів прокрутки, давайте подивимося на них в дії на основі чотирьох прикладів.
Для спрощення ми фокусуємося тільки на перевірці того, як ефекти будуть змінюватися в залежності від різних значень властивостей вікна width і height.
Цей ефект запускається, коли верхня позиція смуги прокрутки перевищує 60px. В цьому випадку виконується фрагмент коду виглядає наступним чином:
Вищенаведений код ховає елемент h2 з елемента з класом .banner. і відображає дочірній елемент .info. який спочатку приховано.
Цей код також можна було написати в такий спосіб:
Наступний приклад залежить не тільки від позиції смуги прокрутки, але також і від ширини вікна. Зокрема, є такі умови:
- Ширина вікна складає 549px-менш. В цьому випадку анімація запускається тільки в тому випадку, коли позиція смуги прокрутки перевищує 600px.
- Ширина вікна знаходиться в проміжку між 550px і 991px. В цьому випадку анімація запускається тільки тоді, коли становище смуги прокрутки перевищує 480px.
- Ширина вікна більше 991px. В цьому випадку анімація запускається тільки коли становище смуги прокрутки перевищує 450px.
Код для вищенаведених випадків представлений нижче:
Код запускається анімації виглядає наступним чином:
Вищенаведений код анімує властивості opacity. height і width елементів .clients-info.
Третій ефект залежить не тільки від позиції смуги прокрутки, але також і від ширини вікна. Зокрема, є такі умови:
- Ширина вікна складає 549px-менш. В цьому випадку анімація запускається тільки в тому випадку, коли позиція смуги прокрутки перевищує 1750px;
- Ширина вікна знаходиться в проміжку між 550px і 991px. В цьому випадку анімація запускається тільки тоді, коли становище смуги прокрутки перевищує 1150px;
- Ширина вікна більше 991px. В цьому випадку анімація запускається тільки коли становище смуги прокрутки перевищує 850px.
Код для вищенаведених випадків представлений нижче:
Код виконуваної анімації виглядає наступним чином:
Вищенаведений код послідовно змінює властивість opacity елементів .method. а потім змінює властивість background-color дочірніх елементів h4.
Цей ефект залежить не тільки від позиції смуги прокрутки, але також і від ширини вікна. Зокрема, є такі умови:
- Ширина вікна складає 549px-менш. В цьому випадку анімація запускається тільки в тому випадку, коли позиція смуги прокрутки перевищує 3500px;
- Ширина вікна знаходиться в проміжку між 550px і 991px. В цьому випадку анімація запускається тільки тоді, коли становище смуги прокрутки перевищує 2200px;
- Ширина вікна більше 991px. В цьому випадку анімація запускається тільки коли становище смуги прокрутки перевищує 1600px.
Результати в наступному коді:
Код анімації наступний:
Вищенаведений код послідовно анімує властивості opacity. left. right і bottom елементів p. img. button.
висновок
Сподіваюся, представлені тут приклади добре демонструють, як можна використовувати jQuery для реалізації анімації і ефектів прокрутки.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!