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

Sep 13, 2025

jak

(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

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

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

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

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

01. Definujte rámec dokumentu HTML

02. Identifikujte obsah HTML

03. Vytvořte kontejner CSS paralaxy

04. Nastavení vrstev CSS paralaxy

05. Použijte vrstvy na pozadí CSS

06. Proveďte iniciaci JavaScriptu

07. Vypočítat pohyb myši JavaScript

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

Jak čistit štětce: Definitivní průvodce

Jak používat REAK Spring k animaci komponent

Vytvořit Boží paprsky v v-ray

Jak vytvořit ikonu aplikace v aplikaci Illustrator

otočte 2D ilustrace do 3D ART

Jak ovlivnit pořadí Google s obsahem

Udělejte animovaný gif ve Photoshopu

Připravte svou práci pro 3D Tisk: 8 Top tipů

Kategorie