Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End

Проста техніка Parallax скроллінга

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

Parallax скроллінг – цікава техніка, при якій фонові зображення переміщуються повільніше, ніж контент на передньому плані, створюючи цим ілюзію 3D глибини.  Так як я планував редизайнити свій сайт, моя ціль була написати найкоротший та найпростіший код і при цьому досягти максимально вражаючого ефекту. Я покажу вам, як я це зробив.

Якщо ви шукаєте швидкий спосіб, щоб розпочати роботу з базовим шаблоном для вашої теми, тоді пошук простої Parallax Theme може бути хорошим варіантом.  Або ж перегляньте наші односторінкові шаблони. Ви також можете знайти розробників на Envato Studio, які створять для вас сайти з parallax скроллінгом

В цьому уроці я навчу вас найпростішій техніці параллакс скролінга с которой вы когда-либо сталкивались, поэтому давайте углубимся!


Крок 1: Розмітка

Дана техніка зосереджена навколо контролю швидкості фонового зображення. Отже, давайте розпочнемо з розмітки HTML, створивши два розділи з необхідними атрибутами: "data-type" і "data-speed". Не хвилюйтесь, я поясню це пізніше.

Я використовую тег <section> з атрибутами data-type і data-speed, які були введені в HTML5. Це робить разметку HTML більш зручною для читання.

Відповідно до специфікації Custom Data Attributes, будь-який атрибут, який починається з data-, буде приянятий як область зберігання даних користувача. Крім того, це не впливатиме на макет або відображення.

Оскільки все, що нам потрібно зробити, це контролювати швидкість фонових зображень, ми будемо використовувати data-type="background" та data-speed="10" в якості ключових атрибутів для вказання необхідних параметрів.

Я знаю, про що ви думаєте: ви хвилюєтесь про IE. Не бійтесь, в мене є рішення і для цієї проблеми. За мить ми це обговоримо.

Далі, давайте додамо контент в тег <article> в середині кожної <section> .

Зараз ми намагаємося зробити фонову прокрутку повільнішою, ніж її контент, тобто <article>. Це допоможе нам створити ілюзію паралаксу. Перш ніж перейти до чудес jQuery, додамо фонові зображення в наш CSS для кожної <section>.

Після додавання фона для обох розділів, має бути ось такий вигляд:

image
image

Давайте додамо ще декілька CSS стилей та оживимо сторінку!

Тепер це має виглядати ось так…

image

Крок 2: Чарівний код

Так, це дійсно так, саме зараз починаються чудеса! Використовуючи jQuery, ми почнемо зі стандартного методу document.ready(), щоб переконатись, що сторінка завантажена і готова до маніпуляцій.

Цей метод зосереджується навколо контролю швидкості фонового зображення, яке існує в обох розділах.

Тепер мені потрібна ваша увага. Перше, що відбується нижче, це те, що ми інтеруємося по кожній <section> на сторінці, де є атрибут data-type="background".

Додайте ще одну функцію, .scroll(), в .each(), яка викликається, коли користувач починаю прокрутку.

Нам потрібно визначити, скільки користувач скроллив, а потім розділити це значення, на значення data-speed, вказане в розмітці.

$window.scrollTop(): ми отримуємо поточне значення скролал зверху. Це в основному визначає, скільки користувач скроллив. $bgobj.data('speed') відноситься до data-speed, визначеній в розмітці, а yPos – це останнє значення, яке нам потрібно застосувати до скролінга.  Проте, значення буде від'ємне, оскільки ми повинні перемістити фон в напрямі, протилежному скролінга користувача.

Розглянемо це більш детально, використовуючи приклад:

image

На приведеному вище зображенні data-speed рівний 10, і, припустимо, що вікно браузера скроллився на 57px. Це означає, що 57px ділиться на 10 = 5.7px.

Останнє, що нам потрібно зробити, це зібрати наше кінцеве розміщення фону в змінну. Щоб зберегти горизонтальне положення екрану статичним, мы встановили 50% в якості xPosition.  Потім ми додали yPos в якості yPosition і, наостанок, назначили фонові координаты на наш : $bgobj.css ({backgroundPosition: coords});.

Ваш фінальный код повинен виглядати ось так:

Так, ми це зробили! Спробуйте зробити самі для себе!


Фікси IE

Останній моммент: старіша версія IE не можевідображати теги <section> і <article>. Це легко виправити; ми використовуватимемо стандартні методи створення елементів, що саме і робить браузер, розпізнаючи теги HTML5.

Крім того, нам потрібно використовувати базовий файл reset CSS, щоб всі баузери працювали як слід. На щастя, інструменти HTML5 Boilerplate, потурбувалися про це для нас, коли діло доходить до нормалізації крос-браузерності.

Це все по даному уроку! У вас є запитання чи зауваження якими ви б хотіли поділитися? Дайте мені знати про це в коментарях!

І якщо ви шукаєте швидке рішення з професійним результатом ознайомтесь з нашими темами та шаблонами Parallax Theme і One Page, які ви можете купити на ThemeForest.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.