Създайте контролиран от мишката паралакс ефект на фона

сайт за паралакс на мишката
(Кредит на изображението: Рено Ролингер)

Сайтовете с паралакс скролиране продължават да са популярни по някаква причина: те създават приятно и увлекателно сърфиране за потребителя. Вече разгледахме най-доброто зашеметяване превъртане с паралакс уебсайтове, които да ви вдъхновяват, но какво правите, ако искате да направите свой собствен?

За щастие, френският творчески разработчик Рено Ролингер е тук, за да ви покаже въжетата за това как да създадете паралакс скролиращ фон, който можете да контролирате с мишката. Вижте невероятните резултати на неговия сайт и след това научете от самия Ролингер по-долу за това как можете да възпроизведете ефекта в следващия си проект.



Можете също да опитате едно от тях строители на уебсайтове и докато обмисляте ефективността на вашия сайт, проверете уеб хостинг услугата работи за вас. Имате тежък медиен сайт? Архивирайте с надеждни съхранение в облака .



01. Определете рамката на HTML документа

сайт за паралакс на мишката

Отваряйки се на монохромен начален екран, сайтът веднага съпоставя анимирани 3D фонове с японска типография(Кредит на изображението: Рено Ролингер)

Първата стъпка е да се определи рамката на HTML документа. Това се състои от HTML контейнера, който описва документа като имащ раздели за глава и тяло. Докато секцията head свързва външните JavaScript и CSS файлове, тя се използва за определяне на елементите на съдържанието на страницата в стъпка 2.



Parallax Background *** STEP 2 HERE

02. Идентифицирайте съдържанието на HTML

Съдържанието на тялото се състои от дисплеен текст и div контейнер с помощта на паралакс на данни атрибут. Този елемент на контейнера ще бъде използван за паралаксния фон, като всеки от неговите дъщерни елементи ще бъде стилизиран с необходимите фонови изображения. В този пример контейнерът има три слоя с изображения, които трябва да бъдат създадени от дъщерните елементи div.

Hello!

03. Създайте CSS контейнер за паралакс

сайт за паралакс на мишката

Превъртайки надолу, нещата стават по-цветни, с насърчение да следвате котешкия герой и щракнете по пътя си към основното портфолио(Кредит на изображението: Рено Ролингер)

Създайте нов файл, наречен стилове.css . Първата стъпка в този файл задава цвета на съдържанието по подразбиране да бъде бял и настройките за фоновия контейнер за паралакс. Фиксирано позициониране се прилага към контейнера за паралакс, за да остане в същата позиция като превъртането на съдържанието над него. Като цвят на страницата се прилага цвят по подразбиране, докато отрицателният z-индекс позволява контейнерът да се показва под съдържанието на страницата.





html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. Настройте CSS паралакс слоеве

Всеки от слоевете с изображения е настроен да използва абсолютно позициониране с размер, който да съответства на прозореца на браузъра. Паралаксното изображение в този пример ще се основава на модел с определен размер, който е настроен да се повтаря. Можете да изберете да повтаряте изображението само вертикално, като използвате repeat-y, или хоризонтално, като използвате repeat-x.



[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Използвайте CSS фонови слоеве

сайт за паралакс на мишката

Желаещ да намери разработка от публичността на сайта, Рено не губи никакъв шанс да демонстрира своите умения за WebGL(Кредит на изображението: Рено Ролингер)

Докато всеки от слоевете с изображения споделя позицията и размера на настройките, определени в стъпка 4, всеки слой използва уникално изображение. Селекторът n-дете се използва за препратка към всеки отделен елемент в контейнера за паралакс. Атрибутът фоново изображение се използва за изчертаване на две линии, което създава ефект на мрежа, когато се облицоват. Долните слоеве използват по-тъмни цветове, за да осигурят усещане за дълбочина.



[data-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. Извършете иницииране на JavaScript слой

Създайте нов файл, наречен code.js . Тази стъпка намира контейнера за паралакс и инициира всеки от слоевете на изображението с индекс на данни атрибут, който ще се използва в стъпка 7. Това трябва да се извърши от функция, прикрепена към събитието за зареждане на прозореца на браузъра, така че кодът да се изпълнява само когато съдържанието на тялото на страницата е готово.

window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. Изчислете движението на мишката в JavaScript

Ефектът разчита на преместване на изображенията, свързани с всеки паралакс слой в отговор на движението на мишката. Контейнерът за паралакс, идентифициран в стъпка 6, има a движение на мишката прикачен слушател на събития, който задейства функция за преместване на фонови изображения на паралаксните слоеве, когато има движение на мишката. Всеки слой има изчисление на движението въз основа на индексния номер, приложен в стъпка 6.

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

Тази статия първоначално е публикувана в списание за творчески уеб дизайн Уеб дизайнер . Купете брой 290 сега.

Свързани статии: