Vytvoření efektu paralaxy řízené myši

Feb 3, 2026
jak
parallax mouse site
(Image Credit: Renaud Rohlinger)

Místa s paralaxou rolování jsou i nadále populární z důvodu: vytvářejí příjemný a zapojený zážitek procházení pro uživatele. Už jsme se podívali na nejlepší ohromující paralaxační rolování Webové stránky vás inspirovat, ale co děláte, pokud chcete udělat jeden z vlastních?

Naštěstí francouzský kreativní vývojář Renaud ROHLinger je zde ukázat lana, jak vytvořit paralaxační rolování pozadí, které můžete ovládat s myší. Podívejte se na úžasné výsledky jeho stránky a pak se naučit z Rohlingera sám o tom, jak můžete replikovat efekt v dalším projektu.

Můžete také zkusit jeden z nich Stavitelé webových stránek a zatímco uvažujete o výkonu webu, zkontrolujte svůj web hosting Služba pro vás pracuje. Máte mediální těžké místo? Zálohovat se spolehlivým cloudové úložiště .

01. Definujte rámec dokumentu HTML

parallax mouse site

Otevření monochromatické úvodní obrazovky, místo okamžitě juxtaposes animovaný 3D pozadí s japonskou typografií (Image Credit: Renaud Rohlinger)

Prvním krokem je definovat rámec HTML dokumentu. To se skládá z kontejneru HTML, který popisuje dokument jako sekce pro hlavu a tělo. Zatímco sekce Head odkazuje externí soubory JavaScript a CSS, sekce karoserie slouží k definování prvků obsahu stránky v kroku 2. 

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt, titul & gt; paralaxy pozadí & lt; / titul & gt;
& lt; link rel = "Stylesheet" typ = "text / css"
href = "styles.css" / gt;
& lt; scénář src = "code.js" & gt; & lt; / script & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
   *** Krok 2 zde
& lt; / tělo & gt;
& lt; / html & gt;

02. Identifikujte obsah HTML

Obsah těla se skládá ze zobrazení textu a nádoby DIV pomocí Data-Parallax. atribut. Jedná se o tento kontejnerový prvek, který bude použit pro pozadí paralaxu, s každým ze svých podřízených prvků, které mají být stylizovány s požadovanými obrazy na pozadí. V tomto příkladu má kontejner tři obrazové vrstvy, které mají být vytvořeny z prvků DIGH DIV. 

 & lt; h1 & gt; hello! & Lt; / h1 & gt;
& lt; div dat-paralaxu a gt;
   & lt, div & gt; & lt; / div & gt;
   & lt, div & gt; & lt; / div & gt;
   & lt, div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Vytvořte kontejner CSS paralaxy

parallax mouse site

Posouvání dolů, věci jsou více barevné, s povzbuzením následovat charakter kočky a klikněte na cestu do hlavního portfolia (Image Credit: Renaud Rohlinger)

Vytvořit nový soubor styles.css. . Prvním krokem v tomto souboru nastaví výchozí obsah obsahu, který má být bílý a nastavení pro nádobu na pozadí paralaxy. Pevné umístění se aplikuje na nádobu Parallax, aby se umožnilo zůstat ve stejné poloze, když se objeví posouvá. Výchozí barva se použije jako barva stránky, zatímco negativní Z-index umožňuje, aby se kontejner zobrazoval v rámci obsahu stránky. 

 HTML, tělo {
   Barva: #fff;
}
[Data-paralaxa] {
   Poloha: pevná;
   šířka: 100vw;
   Výška: 100VH;
   top: 0;
   vlevo: 0;
   Z-index: -1;
   Barva pozadí: # 000;
}

04. Nastavení vrstev CSS paralaxy

Každá z obrazových vrstev je nastavena tak, aby používala absolutní polohování s velikostí, která odpovídá oknu prohlížeče. Obraz paralaxy v tomto příkladu bude založen na konkrétním tvaru velikosti, který je nastaven na opakování. Můžete zvolit, zda obrázek opakujete pouze vertikálně pomocí opakovaného použití nebo vodorovně pomocí opakovaného použití-x. 

 [Data-paralaxa] & gt; * {
   Pozice: absolutní;
   šířka: 100vw;
   Výška: 100VH;
   pozadí-opakování: opakování;
   Velikost na pozadí: 20vw 20vw;
}

05. Použijte vrstvy na pozadí CSS

parallax mouse site

CHEEN najít rozvojovou práci z webu publicity, Renaud odpadne žádnou šanci předvést jeho WebGL WAPGLE (Image Credit: Renaud Rohlinger)

Zatímco každý z obrazových vrstev sdílí nastavení polohy a velikosti definované v kroku 4, každá vrstva používá jedinečný obraz. Volič NTH-Díe se používá k referenci každého jednotlivého prvku v nádobě paralaxy. Atribut pozadí obrázku se používá k nakreslení dvou řádků, které vytvářejí efekt mřížky při kachlení. Dolní vrstvy používají tmavší barvy, které pomáhají poskytnout vnímání hloubky. 

 [Data-paralaxa] & gt; *: ntt-dítě (1) {
   Obrázek na pozadí:
      lineární gradient (vpravo, # 333 1px,
  transparentní 1px),
      lineární gradient (na dno, # 333 1px,
  transparentní 1px);
}
[Data-paralaxa] & gt; *: ntt-dítě (2) {
   Obrázek na pozadí:
      lineární gradient (doprava, # 777 1px,
transparentní 1px),
      lineární gradient (na dno, # 777 1px,
transparentní 1px);
}
[Data-paralaxa] & gt; *: ntt-dítě (3) {
   background-age.
      lineární gradient (vpravo, #fff,
transparentní 1px),
      lineární gradient (na dno, #fff 1px,
 transparentní 1px);
}

06. Proveďte iniciaci JavaScriptu

Vytvořit nový soubor Code.js. . Tento krok najde nádobu paralaxy a iniciuje každou z jeho obrazových vrstev s Data-index Atribut, který bude použit v kroku 7. To musí být provedeno z funkce připojené k události zátěže okna prohlížeče, takže kód je proveden pouze tehdy, když je obsah těla stránky připraven. 

 window.addeventListener ("zatížení", funkce () {
   var kontejneru = dokument.
QuerySelektor ("[Data-Parallax]");
   var dětí = kontejner.children;
   pro (var n = 0; n

07. Vypočítat pohyb myši JavaScript

Efekt se spoléhá na pohyb obrazu spojených s každou paralaxou v závislosti na pohybu myši. Nádoba paralaxy identifikovaná v kroku 6 má mousemove. Připojený posluchač událostí, který spustí funkci k přemístění snímků na pozadí paralaxy, kdykoliv je pohyb myši. Každá vrstva má výpočet pohybu na základě indexového čísla použitého v kroku 6. 

 Kontejner.AddeventListener ("mousemove", \ t
 funkce (e) {
   var el ... this.children;
   pro (var c = 0; c

Tento článek byl původně publikován v časopisu Creative Web Design Web Designer. . Prodám vydání 290 nyní.

Související články:

  • 10 nejlepších rámců CSS v roce 2019
  • Jak přidat animaci na SVG s CSS
  • 52 Web Design Tools, které vám pomohou pracovat chytřejší v roce 2019

jak - Nejoblíbenější články

Jak zastavit brýle zamlžování při nošení obličejové masky

jak Feb 3, 2026

(Image Credit: Getty Images) Pokud vaše brýle udržují mlhy, když máte na sobě obličejovou masku, nejsi sám. ..

Listy znaků pro 3D Modellers: 15 Top tipů

jak Feb 3, 2026

(Image Credit: Dahlia Khodur) Listy jsou řádem dne v tomto tutoriálu, který pokrývá, jak vytvářet jeden pro 3..

Průvodce pro službu Google Cloud Vision

jak Feb 3, 2026

Strojové učení. Hluboké učení. Zpracování přirozeného jazyka. Počítačové vidění. Automatizace. Hlasové rozpozná..

5 Tipy pro super-rychlé CSS

jak Feb 3, 2026

Přemýšleli jste o velikosti CSS vašich stránek? Pokud je váš stylový list balón, mohlo by to být zpožděné renderová..

8 Essential WordPress bezpečnostní tajemství

jak Feb 3, 2026

Během posledních 15 let se WordPress stala nejoblíbenějším systémem pro správu obsahu na světě. Snadné začít s a extrémně univerzální, je to jeden z Nejlepší blogov..

Udělejte své postavy pop s barvou a světlem

jak Feb 3, 2026

Opravdu mám rád práci v barvě, ať už je to v Photoshop CC. nebo malování tradičně s akvarely. Vibrujíc�..

5 tipů pro zlepšení vašich výtvorů VR

jak Feb 3, 2026

Vertex Workshop Leader. Glen Southern. Sdílí jeho nejlepší tipy, které vám pomohou ..

Konečný průvodce pro kompozici snímků ve Photoshopu

jak Feb 3, 2026

Všech photoshopových projektů, kompoziční obrazy do jednoho fantastického rámce je možná nejvhodnější a kreativní pr..

Kategorie