Як зробити багатошарову Parallax ілюстрацію на CSS & JavaScript
Привіт друзі, я покажу вам, як створити просту багатошарову ілюстрацію з глибиною, яка переходить до контенту. Ми будемо використовувати метод, в якому необхідний тільки css та чистий JS(coffeescript) (Ніяких jQuery!).
Цей урок для початківців, з початковим знанням JS і CSS, так що я поясню більшість речей і посилатися на зовнішні джерела.
Підготуємо ілюстрацію
Почнемо з того, що наріжемо ілюстрацію на шари. Найкращим варіантом розвитку подій буде те, що ви самі намалювали або у вас є доступ до вихідного файлу з усіма шарами. Якщо ні, то не хвилюйтеся ми розберемося з цим. Я працюватиму з картиною, яку намалював минулого року. Якщо у вас немає можливості створити свою, ми можете завантажити мої вихідні джерела перед тим, як ми почнемо.
Нам потрібно розділити картину на кілька файлів png з прозорим фоном, що дасть нам можливість створити почуття глибини.
Шари на задньому плані рухатимуться повільніше, ніж на передньому, що дасть нам ефект глибини.
Ще одна річ, яка дасть нам найкращий перехід до наступної секції - це намалювати внизу картинки лінію такого ж кольору, як фон сторінки. Я додав непомітну лінію на передньому тлі внизу зображення.
Почнемо кодувати
Підготовка
Що вам знадобиться:
- Свіжий проект у Codepen (Якщо ви хочете слідувати коду нижче, то не забудьте змінити HTML на HAML, CSS на SCSS та JS на Coffeescript, в налаштуваннях Codepen)
- Початкові знання HAML & Sass(SCSS)
- Базове розуміння Javascript і Coffeescript (Якщо у вас все ще погано з цим - я рекомендую "Javascript & jQuery" by Jon Duckett) Якщо вам не хочеться працювати з Coffeescript, то ви можете автоматично конвертувати його в JS і вставити фрагменти коду нижче щоб отримати чистий JS
- Ваші ілюстрація/фото розділена на кілька png шарів
Додамо базових стилів. Почнемо із #hero. Я встановив висоту ілюстрації 800px
Тепер, перейдемо до стилізації класу шарів, що повторює. У кожного з них буде однакова висота, як #hero і позиціонування, і ми додамо
Наступна річ, яку ми хочемо зробити, це додати картинки, які ми підготували до цього. Ми створимо ще кілька класів по одному для кожного шару. Після цього додамо посилання на картинку всередині властивостіbackground-image.
Не забудьте оновити HTML і призначити класи до потрібних div у нашому порядку, першим шар це задній фон, наступні шари накладатимуть поверх один одного
Додамо методом, який буде перевірити, якщо користувач почав прокручувати сторінку вниз.
EventTarget.addEventListener() метод реєструє слухача на EventTarget. event target може бути елемент у document, сам document, об'єкт Window або будь-який об'єкт підтримує події (такі як XMLHttpRequest)
Збережемо кількість пікселів, яка проскролена вертикально від початку сторінки в зміннуtopDistance. Щоб зробити це, будемо використовувати властивість pageYOffset
Після цього, ми виберемо всі шари у нашій ілюстрації тазбережемо їх у зміннуlayers. Для цього ми будемо використовуватися методом querySelectorAll і data атрибут всередині HTML елементів, який ми встановили до цього.
Наступне що ми зробимо, це пройдемося циклом через усі шари і застосуємо властивістьtransformдо кожного з них. Але перед цим ми вкажемо ще одну річ усередині нашого HTML файлу, атрибут data-depth. Він дасть нам можливість контролювати, як швидко елемент буде рухатися, давайте не будемо глибоко заглиблюватися в значення, ми повернемося до цього пізніше.
Щоб пройти всі елементи, ми будемо використовувати цикл for. Почнемо наш цикл зі створення змінної, де ми зберігатимемо наші шари. Після цього візьмемо значення з data-depth атрибута, який ми вказали всередині нашого HTML. Далі, ми обчислимо пересування шарів, помноживши дистанцію скрола від початку сторінки значення атрибута data-depth даного шару. Елемент зі значенням 1.0 буде рухатися нормально з іншою сторінкою, ви можете сприймати його як елемент з вимкненим parallax.
Останнє, що ми зробимо, це оновимо остаточне значення руху для параметраtransform translate3dшару, щоб зробити це ми будемо використовувати властивість style разом з усіма вендорними префіксами дляtransform.
Щоб код був більш читаний та DRY, ми збережемо параметрtranslate3dу зміннуtranslate3d
Тепер коли ми вказали data-depth="1.00" елемент буде рухатися разом зі сторінкою, як звичайний елемент без ефекту parallax. Всі значення менше ніж 100 будуть мати ефект parallax.
Щоб показувати його замість parallax, використовуватимемо media query і застосовувати параметр display: none до десктопної версії, перевизначаючи наш display: none на display: block для #hero-mobile.
Хардкорна конфа за С++. Ми запрошуємо лише профі.