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

Sep 11, 2025
Як
parallax mouse site
(Зображення кредиту: Renaud Rohlinger)

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

На щастя, французький творчий розробник Renauud Rohlinger є тут, щоб показати вам мотузки для створення паралаксного прокручування фону, який ви можете контролювати за допомогою миші. Ознайомтеся з дивовижними результатами його сайт , а потім вчитися у самому rohlinger нижче, як ви можете відтворити ефект у наступному проекті.

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

01. Визначте структуру документів HTML

parallax mouse site

Відкриття до монохромного сплескного екрану, сайт відразу ж супроводжують анімаційні 3D-фони з японською типографікою (Зображення кредиту: Renaud Rohlinger)

Перший крок - визначити структуру документа HTML. Це складається з HTML-контейнера, який описує документ, що має розділи для голови та тіла. У той час як розділ Head Посилає зовнішній JavaScript та CSS-файли, розділ тіла використовується для визначення елементів вмісту сторінок на кроці 2. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; parallax background & lt; / title & gt;
& lt; Link Rel = "StyleSheet" Type = "Текст / 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. Визначте вміст HTML

Вміст тіла складається з тексту дисплея та контейнера DID за допомогою Дані-паралакс атрибут. Саме цей контейнер, який буде використовуватися для фону паралакса, з кожним з його дитинствих елементів, щоб бути стильним з необхідними фоновими зображеннями. У цьому прикладі контейнер має три шари зображень, які будуть створені з елементів дитини. 

 & lt; h1 & gt; hello! & Lt; / h1 & gt;
& lt; div data-parallax & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Створіть контейнер Parallax CSS

parallax mouse site

Прокручуючи вниз, речі отримують більш барвисті, з заохоченням дотримуватися символів CAT, і натисніть свій шлях до основного портфеля (Зображення кредиту: Renaud Rohlinger)

Створіть новий файл під назвою styles.css . Перший крок у цьому файлі встановлює колір вмісту за замовчуванням, щоб бути білим та налаштуваннями для контейнера для паралакса. Фіксований позиціонування застосовується до контейнера паралакса, щоб вона залишається в тому ж положенні, що і вміст прокручує його. Колір за замовчуванням застосовується як колір сторінки, тоді як негативний Z-індекс дозволяє контейнеру відображатися під вмістом сторінки. 

 HTML, тіло {
   Колір: #fff;
}
[Дані-паралакс] {
   Позиція: фіксована;
   Ширина: 100в.
   Висота: 100вх;
   Верх: 0;
   ліворуч: 0;
   Z-індекс: -1;
   Колір фону: # 000;
}

04. Налаштування шарів Parallax CSS

Кожен з зображень шарів встановлюється для використання абсолютного позиціонування з розміром, щоб відповідати вікна браузера. Зображення паралакса у цьому прикладі буде заснована на певному шаблоні, який встановлюється, щоб повторити. Ви можете повторити лише зображення вертикально, використовуючи повторення-Y, або горизонтально, використовуючи Repeat-X. 

 [DATA-PARALLAX] & GT; * {
   Позиція: абсолютна;
   Ширина: 100в.
   Висота: 100вх;
   Фон-повторення: повторити;
   Фон-розмір: 20vw 20vw;
}

05. Використовуйте шари фону CSS

parallax mouse site

Прагнуть знайти роботу з публічності сайту, відходи Renaud не має можливості демонструвати свою майстерну майстерну (Зображення кредиту: Renaud Rohlinger)

Хоча кожен з шарів зображення поділяються параметри розташування та розміру, визначені на кроці 4, кожен шар використовує унікальне зображення. Селектор NTH-дитина використовується для посилання кожного окремого елемента в контейнері паралакса. Атрибут фонового зображення використовується для нанесення двох рядків, що створює ефект сітки при черепиці. Нижні шари використовують темні кольори, щоб допомогти забезпечити сприйняття глибини. 

 [DATA-PARALLAX] & GT; *: Nth-Child (1) {
   фонове зображення:
      Лінійний-градієнт (праворуч, # 333 1PX,
  прозорий 1px),
      Лінійний-градієнт (донизу, # 333 1PX,
  прозорий 1px);
}
[data-parallax] & gt; *: Nth-Child (2) {
   фонове зображення:
      Лінійний-градієнт (праворуч, # 777 1PX,
прозорий 1px),
      Лінійний градієнт (до дна, # 777 1PX,
прозорий 1px);
}
[data-parallax] & gt; *: Nth-Child (3) {
   фонове зображення
      Лінійний градієнт (праворуч, #FFF,
прозорий 1px),
      Лінійний-градієнт (донизу, #FFF 1PX,
 прозорий 1px);
}

06. Виконайте ініціювання рівня JavaScript

Створіть новий файл під назвою code.js . Цей крок знаходить контейнер паралакса та ініціює кожен з його шарів зображення з Індекс даних Атрибут, який буде використовуватися на кроці 7. Це повинно виконуватися з функції, прикріпленої до подія завантаження вікна веб-переглядача, щоб код виконується лише тоді, коли вміст тіла сторінки готовий. 

 Window.addeventlistener ("Навантаження", функція () {
   var container = документ.
QuerySelector ("[DATA-PARALLAX]");
   var childnodes = контейнер. Діти;
   для (var n = 0; n & lt; phildnodes.length; n ++) {
      подушки [n] .SetTtribute ("Індекс даних", N + 1);
   }
   **** Крок 7 Тут
});

07. Розрахуйте рух миші JavaScript

Ефект покладається на переміщення зображень, пов'язаних з кожним паралаксним шаром у відповідь на рух миші. Контейнер паралакс, ідентифікований на кроці 6, має a мус Прикріплений слухачем подій, який викликає функцію, щоб змінити фонове зображення паралаксних шарів, коли є рух миші. Кожен шар має розрахунок руху на основі індексу, що застосовується на кроці 6. 

 контейнер .addeventlistener ("mousemove",
 функція (e) {
   var elms = це. Діти;
   для (var c = 0; c & lt; elms.length; c ++) {
      var motion = parseint (eLMS [c].
getttribute ("Індекс даних")) / 10;
      var x = ((e.clientx) * Рух) + "px";
      var y = ((e.Clienty) * рух) + "px"; ELMS [C] .style.backgroundposition = x +
"" + у;
   }
});

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

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

  • 10 кращих каркасів CSS у 2019 році
  • Як додати анімацію до SVG з CSS
  • 52 Інструменти для веб-дизайну, щоб допомогти вам працювати розумнішим у 2019 році

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

Як створити доступні веб-форми

Як Sep 11, 2025

Форми є важливим компонентом Інтернету, оскільки вони підключають кор..

Як змінити шрифт у вашій Twitter Bio

Як Sep 11, 2025

Є багато людей на Twitter - 261 мільйона рахунків Twitter Останнім часом ми пере..

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

Як Sep 11, 2025

У цьому підручнику я буду керувати вами через мій процес для створення..

Використовуйте інструмент Marmoset, щоб представити моделі ВР

Як Sep 11, 2025

Marmoset toolbag не є новим для 3D-арт промисловість. Це було протягом б..

Підготуйте дошку для фарбування в 3 простих кроках

Як Sep 11, 2025

Я збираюся поділитися найшвидшим Техніка живопису Я використ�..

висвітлюйте свою 3D-роботу з купольними вогнями

Як Sep 11, 2025

Використання купольних вогнів було однією з найбільших досягнень у ст..

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

Як Sep 11, 2025

Page 1 з 2: Сторінка 1 Сторінка 1 Сторінка 2 ..

Як створити 3D-волосся та хутро

Як Sep 11, 2025

Ви можете легко перевантажити перший раз, коли ви працюєте з хутром ..

Категорії