Створіть інтерактивне зображення паралакса

Feb 2, 2026

Як

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

Подивись на Сайт Пан Фіск , спроектований Бмо , і ви помітите інший сорт паралакса, що відбувається: його яскраво-кольоровий головний образ рухається в 3D, у відповідь на ваші рухи миші.

5 порад для Super-Fast CSS

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

Створіть свій власний окулий сайт з ідеальним веб хостинг сервіс і Веб-будівельник інструмент. І, по дорозі, збережіть свої дизайнерські файли в кращому хмара зберігання .

01. Ініціювати HTML

Першим кроком є визначення HTML-документа, який складається з контейнера HTML для зберігання головки та секцій тіла. Хоча головний розділ, перш за все, несе відповідальність за завантаження зовнішніх ресурсів CSS та JavaScript, розділ тіла буде зберігати елементи вмісту, які будуть створені на етапі 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; миша прокрутка & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Крок 2 Тут
& lt; / body & gt;
& lt; / html & gt;

02. Елементи вмісту

Техніка дозволить будь-який контент контенту за допомогою атрибуту паралакса даних, щоб відобразити ефект. Дитячий елемент кожного першого рівня відображатиметься з презентацією паралакс. Цей приклад встановлює три дитячі шари для паралакса, але ви можете додати більше, якщо хочете. Ви також можете додати вміст до цих шарів, таких як текст або зображення; PNG або SVG з прозорості будуть працювати краще.

 & lt; Стаття даних-Parallax & GT;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
& lt; / Стаття & GT;

03. Паралаксний контейнерний стиль

Створіть новий файл під назвою "Styles.css". Перший набір правил у цьому файлі встановлює розмір за замовчуванням паралаксного контейнера та режиму його позиції. Важливо використовувати відносне позиціонування, щоб дитини можуть бути розміщені по відношенню до того, де знаходиться контейнер. Ширина і висота встановлюються, щоб покрити повний екран, щоб дозволити максимальну інтерактивність.

 [DATA-PARALLAX] {
  Позиція: відносна;
  Ширина: 100в.
  Висота: 100вх;
}

04. Діти паралакса

Кожен з елементів першого рівня всередині контейнера паралакса даних розміром розміщується, щоб з'явитися централізовано. Поряд з батьками відносне позиціонування, відсоток використовується як вимірювальна установка, що дозволяє розмістити розміщення та позиціонування, щоб розміщуватись у відношенні до контейнера паралакса. Для цього прикладу, прозорий червоний фон використовується для демонстрації ефекту - ви можете замінити це за допомогою PNG або SVG зображення за вашим вибором за допомогою @Background: URL ("Ваше зображення тут").

 [DATA-PARALLAX] & GT; * {
  Позиція: абсолютна;
  Ширина: 50%;
  Висота: 50%;
  залишилося: 25%;
  Верх: 25%;
  Кордон: 1px твердий # 000;
  Фон: RGBA (255,0,0, .25)
}

05. Ініціюйте JavaScript

Створіть новий файл під назвою "code.js". JavaScript буде використовуватися для контролю відповідей до взаємодій миші користувача. Ми не хочемо, щоб JavaScript запустити будь-який з коду JavaScript, доки сторінка не буде повністю завантажена, отже, код для кроків 06 та 07, що розміщує функцію, запущену за допомогою подія завантаження, яка активується, коли вікно завершило завантаження.

 Window.addeventlistener ("Навантаження", функція () {
  *** Крок 6 Тут
});

06. Пошук вузлів

Перша діяльність JavaScript для виконання негайно після того, як сторінка готова - знайти всі паралаксні шари. По-перше, виявляються контейнери паралакс, а потім їхні діти. Кожна дитина має номер індексу, який застосовується під атрибутом "Дані-індекс".

 AR NODES = Document.QuerySelectorAll ("[DATA-PARALLAX]");
для (var i = 0; i & lt; вузли .length; i ++) {
  var children = вузли [i]. дітям;
  для (var n = 0; n & lt; діти .length; n ++) {
  Діти [n] .setttribute ("Індекс даних", N + 2);
  }
  *** Крок 7 Тут
}

07. Паралакс слухачів

Останній крок полягає в тому, щоб застосувати слухач події для будь-якого руху миші, що відбувається над контейнером паралакс. Будь-які такі дії викликають особливість для розрахунку нових позицій паралаксних шарів на основі позиції миші та атрибуту індексу даних, визначеного на етапі 06, що призводить до оновлення кожного шару на різних кроках. Результат кожного розрахунку застосовується до шарів через атрибут стилю.

 вузли [i] .addeventlistener ("mousemove", функція (e) {e) {e)
  var elms = це. Діти;
  для (var c = 0; c & lt; elms.length; c ++) {
  var divisor = parseint (ELMS [c] .getttribute ("індекс даних"));
  var startx = this.offsetwidth / 4;
  var starty = this.offseight / 8;
  ELMS [C] .style.left = STARTX - (((E.SCreenX / Divisor) -E.ClientX) / 3) + "PX";
  ELMS [C] .style.top = Starty - ((((E.Screeny / Divisor) -E.Clienty) / 3) + "PX";
  }
});

Ця стаття була опублікована у видачі 272 журналу Creative Web-дизайну Веб-дизайнер . Купити проблему 272 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

Анімація SVG з JavaScript
Створіть рідкі ефекти з WebGL
10 способів уникнути проблем з крос-браузером

Створіть інтерактивне зображення паралакса

01. Ініціювати HTML

02. Елементи вмісту

03. Паралаксний контейнерний стиль

04. Діти паралакса

05. Ініціюйте JavaScript

06. Пошук вузлів

07. Паралакс слухачів

Як - Найпопулярніші статті

Як намалювати лев

Отримайте більше від Artrage 6: Top Tips, щоб підвищити ваш робочий процес

Створіть ефект паралакса керування миші

Додати фільтри SVG з CSS

Створіть вітальний інтер'єр за допомогою лінійного мистецтва

Швидкість скульптують істоту в Збрюші

Початок роботи з WebGL за допомогою трьох.js

Створіть символ з сильною позою в Photoshop

Категорії