Maak een muisgestuurde parallax-achtergrondeffect

Sep 11, 2025

Procedures

(Afbeelding Credit: Renaud Rohlinger)

Sites met parallax-scrollen blijven om een reden populair: ze creëren een aangename en boeiende browsenervaring voor de gebruiker. We hebben al naar het beste verbluffend gekeken parallax scrollen Websites om u te inspireren, maar wat doe je als je een van jezelf wilt maken?

Gelukkig is het Franse Creative Developer Renaud Rohlinger hier om je de touwen te laten zien voor het maken van een parallax-scroll-achtergrond die je met je muis kunt bedienen. Bekijk de verbluffende resultaten op zijn site , en leer dan van Rohlinger zelf hieronder over hoe u het effect in uw volgende project kunt repliceren.

Je kunt ook een van deze proberen Website-bouwers , en terwijl u overweegt uw site-prestaties, controleer dan uw web hosting Service werkt voor u. Heb je een media zware site? Back-up met betrouwbare cloud opslag

01. Definieer het HTML-documentkader

De eerste stap is om het kader van het HTML-document te definiëren. Dit bestaat uit de HTML-container die het document beschrijft als secties voor hoofd en lichaam. Hoewel het hoofdgedeelte de externe JavaScript- en CSS-bestanden koppelt, wordt het lichaamsdeel gebruikt om de pagina-inhoudelementen in stap 2 te definiëren.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& LT; TITEL & GT; Parallax Achtergrond & LT; / TITLE & GT;
& LT; LINK REL = "Stylesheet" Type = "Tekst / CSS"
href = "Styles.css" / & GT;
& lt; script SRC = "Code.js" & GT; & LT; / Script & GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
   *** Stap 2 hier
& LT; / BODY & GT;
& LT; / HTML & GT;

02. Identificeer het HTML-gehalte

Het lichaamsgehalte bestaat uit het weergeven van tekst en een div-container met behulp van de data-parallax attribuut. Het is dit containerelement dat zal worden gebruikt voor de parallax-achtergrond, waarbij elk van zijn kindelementen wordt gestyled met de vereiste achtergrondafbeeldingen. In dit voorbeeld heeft de container drie beeldlagen die moeten worden gemaakt van de DIVE-elementen van het kind.

 & 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. Maak een CSS Parallax-container

Maak een nieuw bestand met de naam stijlen.css De eerste stap in dit bestand stelt de standaardinhoudskleur in om wit te zijn en de instellingen voor de parallax achtergrondcontainer. Vaste positionering wordt toegepast op de parallax-container om toe te staan dat het in dezelfde positie blijft als inhoud eroverheen schuift. Een standaardkleur wordt toegepast als de pagina Kleur, terwijl een negatieve Z-index de container kan verschijnen onder de pagina-inhoud.

 HTML, lichaam {
   Kleur: #fff;

[Data-parallax] {
   Positie: vastgesteld;
   Breedte: 100VW;
   Hoogte: 100VH;
   Top: 0;
   Links: 0;
   Z-index: -1;
   achtergrondkleur: # 000;
}

04. Stel CSS Parallax-lagen in

Elk van de afbeeldingslagen is ingesteld om absolute positionering te gebruiken met een maat die overeenkomt met het browservenster. Het parallax-beeld in dit voorbeeld zal gebaseerd zijn op een specifiek formaatpatroon dat is ingesteld om te herhalen. U kunt ervoor kiezen om alleen de afbeelding verticaal te herhalen met behulp van REPEAT-Y, of horizontaal met behulp van REPEAT-X.

 [Data-parallax] & GT;
   Positie: absoluut;
   Breedte: 100VW;
   Hoogte: 100VH;
   Achtergrond-Herhaal: herhaal;
   Achtergrondformaat: 20VW 20VW;
}

05. Gebruik CSS-achtergrondlagen

Terwijl elk van de beeldlagen de positie- en grootte-instellingen delen die in stap 4 zijn gedefinieerd, gebruikt elke laag een uniek beeld. De NTH-kind-selector wordt gebruikt om elk afzonderlijk element in de parallaxcontainer te verwijzen. Het Attribuut Achtergrondbeeld wordt gebruikt om twee regels te tekenen die een net-effect creëert wanneer betegeld. Lagere lagen gebruiken donkerdere kleuren om een perceptie van diepte te bieden.

 [Data-parallax] & GT; *: nth-kind (1) {
   achtergrond afbeelding:
      lineaire verloop (naar rechts # 333 1px,
  transparante 1px),
      lineaire verloop (naar beneden, # 333 1px,
  transparant 1px);

[Data-parallax] & GT; *: nth-kind (2) {
   achtergrond afbeelding:
      lineaire verloop (naar rechts # 777 1px,
transparante 1px),
      lineaire verloop (naar beneden, # 777 1px,
transparant 1px);

[Data-parallax] & GT; *: nth-kind (3) {
   achtergrond afbeelding
      lineaire verloop (naar rechts, #fff,
transparante 1px),
      lineaire verloop (naar beneden, #fff 1px,
 transparant 1px);
}

06. Voer de initiatie van Javascript uit

Maak een nieuw bestand met de naam code.js Deze stap vindt de parallax-container en initieert elk van zijn beeldlagen met de Data-index Attribuut die in stap 7 zal worden gebruikt, dit moet worden uitgevoerd vanuit een functie die is aangesloten op het laadgebeurtenis van de browservenster, zodat de code alleen wordt uitgevoerd wanneer het lichaamsinhoud van de pagina gereed is.

 venster.ADDEVENTLISTENER ("LOAD", FUNCTION () {
   Var Container = Document.
QuerySelector ("[Data-Parallax]");
   Var Childnodes = container. Kinderen;
   voor (var n = 0; n & lt; childnodes.length; n ++) {
      kindertjes [n] .Setattribute ("Data-index", N + 1);
   
   **** Stap 7 hier
});

07. Bereken JavaScript-muisbeweging

Het effect is afhankelijk van het verplaatsen van de afbeeldingen die zijn gekoppeld aan elke parallaxlaag in reactie op de muisbeweging. De parallax container geïdentificeerd in stap 6 heeft een mousemove Gebeurtenislistener bijgevoegd, die een functie activeert om achtergrondafbeeldingen van de parallaxlagen te verplaatsen wanneer er muisbeweging is. Elke laag heeft een bewegingsberekening op basis van het indexnummer dat wordt toegepast in stap 6.

 Container.ADDEVENTLISTENER ("MOUSEMOVE",
 functie (e) {
   Var Elms = This.Children;
   voor (var c = 0; c & lt; elslengte; C ++) {
      Var Motion = PARSEINT (ELMS [C].
getattribute ("Data-index")) / 10;
      var x = ((e.clientx) * beweging) + "px";
      var y = ((e.clienty) * motion) + "px"; elms [c] .style.backgroundposition = x +
"" + y;
   
});

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner Koop nu uitgave 290.

Gerelateerde artikelen:

10 beste CSS-frameworks in 2019
Hoe animatie toe te voegen aan SVG met CSS
52 Webontwerphulpmiddelen om u te helpen slimmer te werken in 2019

Maak een muisgestuurde parallax-achtergrondeffect

01. Definieer het HTML-documentkader

02. Identificeer het HTML-gehalte

03. Maak een CSS Parallax-container

04. Stel CSS Parallax-lagen in

05. Gebruik CSS-achtergrondlagen

06. Voer de initiatie van Javascript uit

07. Bereken JavaScript-muisbeweging

Procedures - Meest populaire artikelen

Figuurtekening: een beginnershandleiding

Hoe Photoshop op de iPhone (ja, het is een ding)

Aan de slag met GraM CMS

8 State-of-the-art CSS-functies (en hoe ze ze gebruiken)

Hoe uw ontwerpportfolio te verfijnen

De regels van responsieve webtypografie

Hoe maak je een RedShift-proxy in Cinema 4D

Hoe een levendig bloemenstilleven te schilderen

Categorieën