In dit artikel bespreken we hoe je CSS kunt gebruiken (transformaties, perspectief en enkele schaaltrucs) om een ​​parallax-effect te creëren voor het scrollen op websites in pure CSS.

Parallax wordt vrijwel altijd verwerkt met behulp van JavaScript en vaker wel dan niet gaat dit proces gepaard met zeer onproductieve methoden met overtredingen van de scroll-gebeurtenis, wijzigingen in het DOM-model direct in de header, en het veroorzaken van onnodige reflow en kleuring.

Dit gebeurt allemaal niet synchroon met de weergave, waardoor framedrops en scroll-stotteren ontstaan. De beste oplossing om het parallax-effect te gebruiken - requestAnimationFrame , wat de manier waarop het werkt volledig verandert - maar hoe kunnen we volledig afkomen van het gebruik van JavaScript?

Door een parallax-effect met CSS te creëren, neemt u al deze zorgen weg en kunt u de browser hardwareversnelling laten gebruiken, waardoor de computer van de gebruiker bijna al het zware werk doet. Het resultaat is soepel scrollen. Alle frames blijven op hun plaats.

Je kunt het effect ook met anderen combineren CSS-functies, zoals mediavragen of -ondersteuning - wie heeft responsieve parallax nodig?

Demomodus Theorie

Voordat we ingaan op de details van hoe het effect werkt, maken we eerst het skelet van de markup:

... ... ...

En enkele basisstijldetails:

Parallax ( perspectief: 1px; hoogte: 100vh; overflow-x: verborgen; overflow-y: auto; ) .parallax__layer ( positie: absoluut; boven: 0; rechts: 0; onder: 0; links: 0; ) .parallax__layer- -base ( transformeren: vertalenZ(0); ) .parallax__layer--back ( transformeren: vertalenZ(-1px); )

In de parallaxklasse gebeurt de magie. Eigenschappen elementhoogte en perspectief vergrendelt het perspectief in het midden, waardoor een startpunt in de 3D-viewport ontstaat.

Met de eigenschap overflow-y: auto kunt u door de inhoud scrollen normale modus, maar nu worden onderliggende elementen relatief ten opzichte van een vast perspectief weergegeven. Dit is de sleutel tot het creëren van het parallax-effect.

De volgende is de klasse parallax__layer. Zoals de naam al doet vermoeden, specificeert het de inhoudslaag waarop het effect zal worden toegepast. Het element wordt opgehaald uit de inhoudsstroom en geconfigureerd om de ruimte van de container te vullen.

En tot slot hebben we de modificatieklassen parallax__layer—base en parallax__layer—back . Ze worden gebruikt om de scrollsnelheid van een parallax-element te bepalen door het langs de Z-as te verplaatsen (verder of dichterbij bewegen ten opzichte van de viewport).

Kortheidshalve heb ik slechts twee laagsnelheden gedefinieerd. We zullen later nog een paar snelheden toevoegen.

Demomodus Dieptecorrectie

Omdat het parallaxeffect wordt gecreëerd met behulp van een 3D-transformatie, is het verplaatsen van een element langs de Z-as ook mogelijk bijwerking— de grootte verandert afhankelijk van hoe we het dichter of verder van het kijkgebied plaatsen.

Om dit te voorkomen, zullen we het element transformeren met behulp van de scale() methode, zodat het op zijn oorspronkelijke grootte verschijnt:

Parallax__layer--back ( transformeren: vertalenZ(-1px) schaal(2); )

De zoomfactor kan worden berekend met behulp van de formule 1 + (translateZ * -1) / perspectief). Als het perspectief van de viewport bijvoorbeeld 1px is en we het element met -2px langs de Z-as verplaatsen, is de schaalfactor scale(3):

Parallax__layer--deep ( transformeren: vertalenZ(-2px) schaal(3); )

Demomodus met dieptecorrectie Laagsnelheidsregeling

De snelheid van de laag wordt bepaald door een combinatie van perspectief- en Z-aswaarden. Elementen met negatieve Z-aswaarden scrollen langzamer dan elementen met een positieve waarde.

Elementen met negatieve Z-waarden scrollen langzamer dan elementen met positieve waarden. Hoe verder de waarde van 0 af ligt, hoe uitgesprokener het parallaxeffect is (translateZ(-10px) zal bijvoorbeeld langzamer scrollen dan translateZ(-1px)).

Verschillende secties van een parallaxpagina maken

De voorgaande voorbeelden demonstreerden de basistechnieken met behulp van zeer eenvoudige inhoud, maar de meeste sites zijn opgesplitst in afzonderlijke delen waar we verschillende effecten kunnen toepassen. Hier is hoe we het zullen doen.

Ten eerste hebben we een parallax__group-element nodig om de elementen in groepen te groeperen:

... ... ...

Hier is de CSS-code voor het groepselement:

Parallax__group ( positie: relatief; hoogte: 100vh; transformatiestijl: behouden-3d; )

In dit voorbeeld wil ik dat elke groep het kijkvenster vult. Stel de waarde hoogte in: 100vh . Indien nodig kunnen echter voor elke groep willekeurige waarden worden ingesteld.

De eigenschap transform-style: behouden-3d voorkomt browser-squats, en de parallax__layer en position: relatieve elementen worden gebruikt om ervoor te zorgen dat de nakomelingen van het parallax__layer-element relatief worden gepositioneerd ten opzichte van de groepselementen.

Een belangrijke regel, die moet worden gevolgd bij het groeperen van elementen - we kunnen de inhoud van de groep niet inkorten. Overflow instellen: verborgen voor parallax__group blokkeert het effect.

Niet-bijgesneden inhoud zal resulteren in een overloopfout op onderliggende elementen, dus we moeten zorgen voor de z-indexwaarden voor de groep om ervoor te zorgen dat de inhoud correct wordt weergegeven/verborgen wanneer u door het document bladert.

Er zijn geen vaste regels voor het werken met lagen, omdat implementaties van ontwerp tot ontwerp zullen verschillen. Het is heel gemakkelijk om te werken aan het oplossen van problemen met lagen als je kunt zien hoe het parallax-effect werkt. Je kunt dit bereiken door een eenvoudige transformatie op de groepselementen toe te passen:

Parallax__group ( transformeren: vertalen3d(700px, 0, -800px) roterenY(30deg); )

Bekijk het volgende voorbeeld en let op de debug-optie!

Demomodus Browserondersteuning

• Firefox, Safari, Opera en Chrome ondersteunen dit effect;
• Alles werkt in Firefox, maar er is momenteel een klein uitlijningsprobleem;
• Internet Explorer ondersteunt conserve-3d nog niet (ondersteuning wordt binnenkort verwacht), dus het parallax-effect wordt niet ondersteund. Voor deze browser moet u inhoud maken zonder dit effect. Maar de vooruitgang staat niet stil! Ga ervoor!

De vertaling van het artikel “Pure CSS parallax scrolling websites” werd voorbereid door het vriendelijke projectteam

Zoals je waarschijnlijk weet, is Parallax dat wel visueel effect, waarbij de posities van objecten er anders uitzien als we ze vanuit verschillende posities bekijken. Parallax scrollen creëert de illusie dat twee objecten die zich in het gezichtsveld bevinden, maar zich op een afstand van elkaar bevinden, met verschillende snelheden bewegen. We zien dit effect overal als we in beweging zijn: als we over straat lopen, zien we dat alle dingen dichtbij veel sneller bewegen dan dingen die verder weg zijn, we kunnen zien dat bomen en struiken vlakbij de weg heel snel voorbij snellen; . snel, maar het landschap op de achtergrond, zoals bergen, beweegt heel langzaam. Dit effect wordt bewegingsparallax genoemd.

Dit effect kan worden toegepast op webpagina's: we kunnen het parallax-effect gebruiken op blokken die achtergrondafbeeldingen en wat interne inhoud. Wanneer we over de pagina scrollen, scrollt de inhoud, maar de achtergrond moet op zijn plaats blijven. CSS zal ons helpen dit effect te creëren.

Stap 1 – HTML Sectie 1 Eenvoudige titel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...

Sectie 2 Eenvoudige titel 2

Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam is een elite bij malesuada...

Sectie 3 Eenvoudige titel 3

Proin tempor uw levensleven is een porttitor, een mannelijke eliminatie van lacinia. Nulla ac tellus nulla. Vergeet niet...

Zoals u kunt zien, is de HTML-opmaak niet ingewikkeld; deze bevat zes alternatieve secties: drie ervan bevatten achtergrondafbeeldingen (secties met de klasse parallax), drie bevatten tekst (secties met de klasse content).

Stap 2 – Afbeeldingen

Alle achtergrondafbeeldingen hebben vaste maat 1600 × 600 pixels. Hierdoor kunnen we afbeeldingen op de meeste schermresoluties gebruiken (responsieve lay-out). Al onze parallaxblokken hebben dezelfde vaste hoogte (600px).

Stap 3 – CSS

Nu moeten we de afbeeldingen uitbreiden om alle beschikbare ruimte te vullen, hiervoor stellen we de waarde in achtergrondgrootte: cover en vervolgens stellen we achtergrondbijlage: vast in om de achtergrond te fixeren.

Container ( max. breedte: 960px; marge: 0 auto; ) section.section:last-child ( margin-bottom: 0; ) section.section h2 ( margin-bottom: 40px; lettertypefamilie: "Roboto Slab", serif ; lettergrootte: 30px; ) section.section p ( marge-onder: 40px; lettergrootte: 16px; lettergrootte: 300; ) section.section p:laatste-kind ( marge-onder: 0; ) sectie. section.content (opvulling: 40px 0;) section.section.parallax (hoogte: 600px; achtergrondpositie: 50% 50%; achtergrondherhaling: niet-herhaling; achtergrondbijlage: vast; achtergrondgrootte: omslag; ) section.section.parallax h1 ( kleur: rgba(255, 255, 255, 0.8); lettergrootte: 48px; lijnhoogte: 600px; lettertypedikte: 700; tekstuitlijning: midden; teksttransformatie: hoofdletters; tekstschaduw: 0 0 10px rgba(0, 0, 0, 0.2 ) section.section.parallax-1 (achtergrondafbeelding: url("../imgages/1.jpg"); ) section.section. parallax-2 ( achtergrondafbeelding: url("../imgages/2.jpg"); ) section.section.parallax-3 ( achtergrondafbeelding: url("../imgages/3.jpg"); ) @media all en (min-breedte: 600px) ( section.section h2 ( lettergrootte: 42px;

) section.section p ( lettergrootte: 20px; ) section.section.parallax h1 ( lettergrootte: 96px; ) ) @media all en (min.breedte: 960px) ( section.section.parallax h1 ( lettergrootte : 160px; ) ) Dit artikel laat zien hoe u het kunt gebruiken CSS-transformaties

en 3D-shenanigans om een ​​parallax-effect op een website te creëren met behulp van pure CSS. Parallax wordt bijna altijd gemaakt met behulp van JavaScript en blijkt meestal veel hulpbronnen te vergen, omdat luisteraars aan de scroll-gebeurtenis worden gekoppeld, de DOM rechtstreeks wordt gewijzigd en onnodige hertekeningen en herschikkingen worden geactiveerd. Dit alles gebeurt asynchroon met de stroom waarin de browser de pagina weergeeft, waardoor het scrollen begint te vertragen en de afbeelding in stukken uiteenvalt. Meer correcte implementaties

parallax-tracks scrollen en gebruiken uitgestelde DOM-updates met requestAnimationFrame . Het resultaat is kwalitatief anders, maar waarom zouden we JavaScript niet helemaal afschaffen? Door het parallax-effect naar CSS te verplaatsen, bespaart u prestatieproblemen en onnodige manipulaties , waardoor de browser alles zelf kan regelen hardwareversnelling

Theorie Voordat we dieper ingaan op het begrijpen van hoe dit mechanisme werkt, maken we eerst de nodige opmaak:

... ... ...
En basisstijlen:

Parallax ( perspectief: 1px; hoogte: 100vh; overflow-x: verborgen; overflow-y: auto; ) .parallax__layer ( positie: absoluut; boven: 0; rechts: 0; onder: 0; links: 0; ) .parallax__layer- -base ( transformeren: vertalenZ(0); ) .parallax__layer--back ( transformeren: vertalenZ(-1px); )
Alle magie gebeurt in de parallaxklasse. Door de hoogte- en perspectiefstijleigenschappen te definiëren, wordt het perspectief van het element op het midden gezet, waardoor een vast 3D-zichtvenster ontstaat. overflow-y: auto zorgt ervoor dat de inhoud binnen het element normaal kan scrollen, terwijl de nakomelingen van het element relatief ten opzichte van een vast perspectief worden getekend. Dit is de sleutel tot het creëren van het parallax-effect.

Vervolgens de klasse parallax__layer. Zoals de naam al doet vermoeden, definieert het de inhoudslaag waarop het parallaxeffect wordt toegepast. Een element met deze klasse wordt uit de algemene inhoudsstroom gehaald en gepositioneerd om de container ervan te vullen.

Tenslotte hebben we de parallax__layer--base en parallax__layer--back modifier-klassen. Ze zijn nodig om de scrollsnelheid van parallaxelementen te regelen, ze langs de Z-as te verschuiven (ze te verwijderen of dichter bij de viewport te brengen). Kortheidshalve heb ik slechts twee scrollsnelheden gemaakt - we zullen er later nog een paar toevoegen.

Dieptecorrectie Omdat het parallaxeffect wordt gecreëerd door 3D-transformaties, heeft het verplaatsen van een element langs de Z-as als neveneffect dat de grootte van het element verandert, afhankelijk van of het zich dichter of verder bij de kijkpoort bevindt. Om dit op te lossen, moeten we een scale()-transformatie toepassen, zodat het element op zijn oorspronkelijke grootte wordt getekend:

Parallax__layer--back ( transformeren: vertalenZ(-1px) schaal(2); )
De schaalcoëfficiënt kan worden berekend met behulp van de formule 1 + (translateZ * -1) / perspectief) . Als het viewport-perspectief bijvoorbeeld is ingesteld op 1px en we het element verschuiven met -2px op de Z-as, dan is de factor scale(3) .

Parallax__layer--deep ( transformeren: vertalenZ(-2px) schaal(3); )

Laagsnelheid aanpassen De laagsnelheid wordt bepaald door een combinatie van perspectief- en Z-offsetwaarden. Elementen met negatieve Z-waarden scrollen langzamer dan elementen met positieve Z-waarden. Hoe groter het verschil tussen de waarde en 0, hoe uitgesprokener het parallaxeffect.
(dat wil zeggen: translateZ(-10px) zal langzamer scrollen dan translateZ(-1px)). Verschillende secties van het parallaxeffect creëren De voorgaande voorbeelden demonstreerden de basistechniek van het gebruik eenvoudige inhoud, maar de meeste parallax-sites verdelen de pagina in verschillende secties met verschillende effecten. Hier leest u hoe we dit in onze methode kunnen implementeren.

Ten eerste hebben we een parallax__group-element nodig om onze lagen te groeperen:

... ... ...
de CSS ervoor zou er als volgt uitzien:

Parallax__group ( positie: relatief; hoogte: 100vh; transformatiestijl: behouden-3d; )
In dit voorbeeld wil ik dat elke groep het kijkvenster vult, dus stel ik de hoogte in: 100vh , hoewel het aantal voor elke groep indien nodig anders kan zijn. transform-style: conserve-3d voorkomt dat de browser parallax__layer-elementen afvlakt, en position: relative maakt het mogelijk dat onderliggende parallax__layer-elementen relatief ten opzichte van hun groep worden gepositioneerd.

Een belangrijke regel om te onthouden is dat we bij het groeperen van elementen de inhoud binnen de groep niet kunnen bijsnijden, omdat overflow: verborgen op het parallax__group-element het hele parallax-effect zal verbreken. Ongesneden inhoud zal resulteren in kind elementen zal de grenzen overschrijden. Daarom moet u spelen met de z-indexwaarde van de groep om er zeker van te zijn dat de inhoud wordt verborgen en correct wordt weergegeven terwijl de gebruiker door de site scrollt.

Er zijn geen vaste regels als het gaat om het werken met lagen en verschillende methoden impliceren verschillende uitvoering. Maar om het opsporen van fouten in de positionering van lagen te vereenvoudigen, kunt u een eenvoudige transformatie van groepselementen toepassen:

Parallax__group ( transformeren: vertalen3d(700px, 0, -800px) roterenY(30deg); )
Bekijk het volgende voorbeeld en let op het selectievakje voor foutopsporing!

Het parallaxeffect werd populair nadat Nike zijn "Nike Better World" -website lanceerde. De site ontving er veel positieve feedback uit verschillende bronnen vanwege het prachtige parallax-scrolleffect en het webontwerp.

Het parallaxeffect bestaat al sinds de jaren tachtig en werd gebruikt in videogames en vervolgens op websites.

Voorbeelden van websites met parallaxeffect: wat is parallax scrollen?

Je hebt al voorbeelden gezien van het gebruik ervan. Voordat we dieper ingaan op voorbeelden van sites die het parallax-effect gebruiken, nemen we even de tijd om uit te leggen wat het is.

Parallax is de schijnbare verplaatsing of het verschil in de schijnbare positie van een object gezien vanuit twee richtingen verschillende punten, niet op dezelfde rechte lijn liggend als het object. In webdesign verwijst parallax naar een scrolltechniek die wordt gebruikt om de illusie van diepte op een website te creëren.

Dit is niet het geval nieuwe technologie. Maar er is veel tijd verstreken tussen het verschijnen ervan en de recente sprong naar trendy stijlen. Om te laten zien hoe het parallax-effect eruit ziet tijdens het scrollen, heb ik sites verzameld die deze techniek gebruiken.

Kijk naar de voorbeelden:

Leren een website-ontwerp te maken met een parallax-effect

Er zijn vier methoden die kunnen worden gebruikt om een ​​website te maken met een parallax-effect jQuery.

• De gelaagdheidsmethode is het gebruik van meerdere achtergrondafbeeldingen die onafhankelijk horizontaal of verticaal kunnen bewegen en op elkaar worden geplaatst.
• Sprite-methode - er één gebruiken groot beeld, samengesteld uit meerdere, en slechts een deel van een groot beeld in verschillende posities weergevend. Vaak gebruikt in navigatiemenu's.
• Herhalende patroonmethode - Scrollende inhoud is opgebouwd uit individuele tegels die over een herhalende achtergrondlaag kunnen bewegen.
• Rastermethode - pixellijnen in een afbeelding worden gecombineerd en van boven naar beneden bijgewerkt met een kleine vertraging tussen de tekenlijnen.

Gids voor het ontwikkelen van een website met parallax scrollen

Zie voorbeeld

Wat je nodig hebt om dit voorbeeld van parallax scrollen te implementeren:

• Wellfleet (Google-lettertype);
• Arvo (Google-lettertype);
• Oswald (Google-lettertype);
• Goudy-boekje 1911 (Google-lettertype);
• Afbeeldingen gebruikt in dit voorbeeld;
• Kerstfoto's binnen hoge resolutie. Je kunt downloaden gratis afbeeldingen vanaf hier of gebruik afbeeldingen uit het hierboven gelinkte archief.

Bestandsstructuur

Voor bestandsstructuur parallax effect voorbeeld: we zullen drie mappen en één HTML-bestand maken:

• html zal het hoofdbestand zijn. In dit bestand komt het gehele ontwerp te staan;
• De js-map is voor JavaScript/jQuery-scripts;
• img map – voor afbeeldingen;
• css map – voor CSS-stijlen.

HTML-opmaak

In het index.html-bestand voegen we eerst een HTML5-documenttypedeclaratie toe, evenals een groep links in de koptekst. Een link naar CSS-bestand , Google-lettertypen, evenals het jQuery-bibliotheekbestand.

Een eenvoudige parallax-scrollwebsite maken

Laten we de jQuery parallax-effectcode overslaan en deze later bespreken. Laten we voorlopig doorgaan met werken met HTML-elementen. We voegen een headertag toe met een logo en navigatie erin. Navigatie leidt naar specifieke dia's. We zullen later een effect toevoegen soepel scrollen zodat het er mooi uitziet.

PARALLAX

• Dia 1
• Dia 2
• Dia 3
• Dia 4
• Dia 5

Laten we nu dia's toevoegen voor het parallaxeffect in het blok. We zullen elk van hen markeren met een ID-kenmerk dat overeenkomt met het bijbehorende ID serienummer. In de dia plaatsen we een blok met de inhoudsklasse om de elementen te centreren.

VROLIJKE KERST GELUKKIG NIEUWJAAR “Toen bedacht de Grinch iets wat hij nog niet eerder had bedacht! Wat als Kerstmis, dacht hij, niet uit een winkel komt? Wat als Kerstmis...misschien...een beetje meer betekent!' dr. Seuss “Ik geloof echt dat als we het kerstverhaal blijven vertellen, de kerstliederen blijven zingen en de kerstsfeer beleven, we vreugde, geluk en vrede in deze wereld kunnen brengen.” Norman Vincent Peale “Kerstmis komt niet uit een winkel, misschien betekent Kerstmis misschien wel iets meer...” dr. Seuss “Mijn idee van Kerstmis, of het nu ouderwets of modern is, is heel simpel: anderen liefhebben. Nu ik erover nadenk, waarom moeten we wachten tot Kerstmis om dat te doen? Bob Hope Copyright 1stwebdesigner.com

Nu we alle HTML-elementen op de pagina hebben geplaatst, ziet de site er zo uit.

CSS-stijlen

Laten we beginnen met het toevoegen van parallaxstijlen voor de body-tag, evenals de H1-, H2- en H3-koppen. Voor de kopjes H1-H2 stellen we het lettertype “Arvo” in.

body( marge: 0; opvulling: 0; breedte: 100%; ) h1 ( lettertypefamilie: "Arvo"; lettertypegewicht: normaal; lettergrootte: 55px; tekstuitlijning: midden; kleur: #fff; marge : 0; opvulling: 0; ) h2 (lettertypefamilie: "Arvo"; lettertypegewicht: normaal; lettergrootte: 40px; tekstuitlijning: midden; kleur: #fff; marge: 0; opvulling: 0; ) h3 ( lettertypefamilie: Oswald; lettertypegewicht: normaal; lettergrootte: 16px; tekstuitlijning: midden; marge: 5px 0; opvulling: 0; z-index: 1; positie: relatief; )

Vervolgens voegen we basisstijlen toe voor het positioneren van elementen op het scherm en de inhoud van de dia's.

Midden ( marge: 0 auto; ) .content( marge: 0 auto; breedte: 960px; ) .clear ( duidelijk: beide; )

Laten we nu de koptekstsectie opmaken met het voorbeeld parallaxeffect. Laten we een afbeelding met een zwarte achtergrond en 60% transparantie aan de kop toevoegen, die het logo en de navigatie zal bevatten. Het logo plaatsen wij links en de navigatie rechts.

#header ( breedte: 100%; achtergrond: url("../img/header-bg.png"); hoogte: 80px; positie: vast; marge-boven: 30px; ) #nav ( breedte: 410px; float: rechts; marge bovenaan: 20px; ) #logo a ( kleur: #fff; tekstdecoratie: geen; zwevend: links; lettergrootte: 30px; marge bovenaan: 20px; kleur: #fff; lettertypefamilie: " Wellfleet"; lettertypegewicht: vet; ) #nav ul( lijststijl: geen; weergave: blok; marge: 0 auto; lijststijl: geen; ) #nav li( marge-top: 9px; zwevend: links; opvulling-links: 21px; ) #nav li a ( kleur: #fff; dekking:0,6; lettergrootte: 16px; tekstdecoratie: geen; lettertypefamilie: "Wellfleet"; ) #nav li a.active ( kleur : #fff; dekking:1; rand-onder: 2px effen #fff; ) #nav li a:hover ( kleur: #fff; dekking:1; )

Aanhalingstekens ( lettertypefamilie: "Goudy Bookletter 1911", serif; lettertypegewicht: normaal; lettergrootte: 30px; tekstuitlijning: links; marge: 50px auto; )
.author_name_white ( lettertypefamilie: "Wellfleet"; marge: 70px 0 0 75px; kleur: #fff; lettertypegrootte: 20px; ) .author_name_gray ( lettertypefamilie: "Wellfleet"; marge: 70px 0 0 75px; kleur: #94a4a4; lettergrootte: 20px; .quotes_container ( breedte: 800px; marge: 0 auto; ) #christmas_tree (achtergrond: url("../img/christmas-tree.png") niet herhalen; breedte: 48px ; hoogte: 77px; marge: 0 auto; positie: relatief; hoogte: 35px; marge: 0px auto 27px auto; ; hoogte: 48px; marge: 0 automatisch; weergave: blok; positie: relatief ; breedte: 24px; hoogte: 21px; marge: 0 automatisch; weergave: blok; positie: relatief; links: -102px; breedte: 24px; hoogte: 21px; marge: 0 automatisch; weergave: blok; onderkant: -33px; rechts: -100px; )

Elke dia in het jQuery parallax-effect heeft een achtergrondafbeelding of wit achtergrondkleur met een vaste positie. Voeg ook kleine marges toe aan elke dia om de elementen te centreren.

#slide1, #slide2 ( breedte: 100%; ) #slide1 ( achtergrond:url("../img/slide1.jpg") 50% 0 geen herhaling vast; kleur: #fff; hoogte: 600px; marge: 0 ; opvulling: 200px 0 260px 0; achtergrondgrootte: cover ) #slide2 ( achtergrondkleur: #fff; kleur: #333333; hoogte: 300px; marge: 0 automatisch; overloop: verborgen; opvulling: 200px 0; ) # slide3 ( achtergrond: url(../img/slide3.jpg) 50% 0 geen herhaling vast; kleur: #fff; hoogte: 600px; vulling: 170px 0 0 0; achtergrondgrootte: cover; ) #slide4 ( achtergrond -kleur: #fff; kleur: #333333; hoogte: 300px; opvulling: 200px 0; ) #slide5 ( achtergrond: url(../img/slide5.jpg) 50% 0 geen herhaling vast; hoogte: 200px; marge : 0 automatisch; opvulling: 250px 0; kleur: #fff; achtergrondgrootte: omslag )

#copyright ( kleur: #fff; lettertypefamilie: "Wellfleet"; lettergrootte: 14px; marge bovenaan: 100px; tekstuitlijning: midden; ) #copyright a ( tekstversiering: geen; kleur: #fff; )

jQuery-code

Laten we onze website nieuw leven inblazen met een parallax-effect. Voeg in het hoofdgedeelte de volgende jQuery-code toe.

$(document).ready(function() ( $("a").each(function() ( if (location.pathname.replace(/^//,"") == this.pathname.replace(/^ //,"") && locatie.hostnaam == deze.hostnaam && deze.hash.replace(/#/,"")) ( var $targetId = $(deze.hash), $targetAnchor = $("") ; var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false ( var targetOffset = $target.offset().top; $(this).click(functie( ) ( $(" #nav li a").removeClass("actief"); $(this).addClass("actief"); $("html, body").animate((scrollTop: targetOffset), 1000) ; return false; ) )));

In dit deel van het jQuery parallax-effect maken we een klikhandler voor alle links met een “#”-teken ergens in het href-attribuut. IN volgende regel we controleren of de link naar dezelfde pagina verwijst door te zoeken naar een match in location.pathname . Op deze manier zijn we er zeker van dat de code zowel werkt met links die de volledige URL bevatten, als met links die alleen uit een ID bestaan.

$(document).ready(function() ( $("a").each(function() ( if (location.pathname.replace(/^//,"") == this.pathname.replace(/^ //,"") && locatie.hostnaam == deze.hostnaam && deze.hash.replace(/#/,"")) ( var $targetId = $(deze.hash), $targetAnchor = $("") var $target = $targetId.length ? $targetId: $targetAnchor.length ? $targetAnchor: false (var targetOffset = $target.offset().top;

Dit deel van de code zorgt ervoor dat de gebruiker op een link in het menu klikt. In dit geval wordt de actieve klasse verwijderd uit de huidige actieve koppeling menu en wordt toegevoegd aan de link die de gebruiker heeft gevolgd. De pagina scrollt ook naar het overeenkomstige blok.

$(this).click(function() ( $("#nav li a").removeClass("active"); $(this).addClass("active"); $("html, body").animate ((scrollTop: targetOffset), 1000); ) ));
});

Tip: U kunt de snelheid van het scrolleffect sneller of langzamer maken door de waarde te wijzigen in 1000 (1000 milliseconden). Je kunt de waarden ‘snel’ (200 milliseconden) of ‘langzaam’ (600 milliseconden) proberen. Houd er rekening mee dat de standaardwaarde 400 milliseconden is.

$("html, body").animate((scrollTop: targetOffset), 1000);

Je kunt dit effect zelf doen.

Laatste woorden over het parallaxeffect

Scrollen met parallaxeffect wordt op veel sites geleidelijk geïntroduceerd. In dit artikel liet ik zien hoe je een eenvoudig parallax-scrolleffect kunt implementeren. Je kunt ermee experimenteren en het verbeteren.

De vertaling van het artikel “Hoe bouw je een eenvoudige Parallax-website” werd voorbereid door het vriendelijke projectteam.

Goed slecht

Het parallaxeffect is een zeer interessante techniek. Bij het scrollen beweegt de achtergrondafbeelding langzamer dan de inhoud, wat resulteert in de illusie van 3D-ruimte. IN deze les we zullen een eenvoudige en demonstreren effectieve manier krijg een prachtig effect.

Markering

Deze techniek is gebaseerd op het regelen van de bewegingssnelheid van het achtergrondbeeld. Laten we creëren HTML-opmaak, met twee secties met de attributen "data-type" en "data-speed" . Het doel van de attributen zal iets later worden onthuld:

Met tags met kenmerken voor gegevenstype en gegevenssnelheid kunt u uw opmaak eenvoudig en duidelijk maken.

Volgens de specificatie worden alle attributen die met data beginnen, behandeld als privégegevensopslag. Bovendien hebben ze geen effect op de sjabloon.

Omdat we de scrollsnelheid van de achtergrondafbeeldingen moeten regelen, kunnen we belangrijkste parameters we zullen data-type="background" en data-speed="10" gebruiken.

Vervolgens voegen we aan elke tag een tag toe.

Absolute positionering Eenvoudig parallaxeffect

We scrollen langzamer door de achtergrond van de tag dan door de inhoud, d.w.z. Hierdoor ontstaat de illusie van parallax.

CSS

Voordat we bij de jQuery-magie komen, voegen we achtergrondafbeeldingen toe aan elk element in de CSS-code.

#home ( achtergrond: url(home.jpg) 50% 0 herhaling vast; min. hoogte: 1000px; ) #about ( achtergrond: url(about.jpg) 50% 0 geen herhaling min. hoogte: 1000px; )

En laten we stijlen definiëren voor de overige elementen van onze demopagina.

#home (achtergrond: url(home-bg.jpg) 50% 0 herhaling vast; min-hoogte: 1000px; hoogte: 1000px; marge: 0 automatisch; breedte: 100%; max-breedte: 1920px; positie: relatief; ) #home artikel ( hoogte: 458px; positie: absoluut; tekstuitlijning: midden; bovenkant: 150px; breedte: 100%; ) #about ( achtergrond: url(about-bg.jpg) 50% 0 herhaling vast; min-hoogte : 1000px; marge: 0 auto; maximale breedte: 1920px; positie: absoluut; tekst uitlijnen: midden; 150px; breedte: 100%;

Magische code

Wij gebruiken jQuery. Laten we beginnen met standaard methode document.ready() om ervoor te zorgen dat de pagina is geladen en gereed is voor manipulatie.

$(document).ready(functie())( ));

Nu hebben we aandacht nodig. Het eerste dat hier gebeurt, is het doorlopen van alle elementen met het data-type="background" attribuut op de pagina.

$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Wijs het object toe) ));

Aan de functie .each() voegen we nog een function.scroll() toe, die wordt aangeroepen wanneer het scrollen begint.

$(venster).scroll(functie () (

U moet bepalen hoe lang de gebruiker op de pagina heeft gescrolld en vervolgens de resulterende waarde delen door de waarde die is gedefinieerd in het kenmerk datasnelheid.

Var yPos = -($window.scrollTop() / $bgobj.data("snelheid"));

$window.scrollTop() - haal de huidige scrollwaarde van boven op. $bgobj.data("speed") verwijst naar het data-speed attribuut in de markup. yPos is de uiteindelijke waarde die wordt gebruikt voor het scrollen. Er wordt echter een negatieve waarde gebruikt omdat de achtergrond wordt verschoven omgekeerde richting relatief aan het scrollen door de gebruiker.

In ons voorbeeld heeft het datasnelheidsattribuut de waarde 10. Laten we aannemen dat het browservenster 57px scrollt. Dit betekent dat 57px wordt gedeeld door 10 = 5,7px.

// Verzamel de achtergrondpositie var coords = "50% "+ yPos + "px"; // Verplaats de achtergrond $bgobj.css((backgroundPosition: coords ));

Nu moeten we alle gegevens in één waarde verzamelen. Om op te slaan horizontale positie achtergrond statisch is, gebruiken we een waarde van 50% voor de xPosition-eigenschap. Vervolgens voegen we yPos toe als de waarde van de eigenschap yPosition en wijzen vervolgens de coördinaten toe aan de achtergrond: $bgobj.css(( backgroundPosition: coords )); .

De uiteindelijke code ziet er als volgt uit:

$(document).ready(function())( $("section").each(function())( var $bgobj = $(this); // Wijs het object toe $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Zet de achtergrondcoördinaten bij elkaar var coords = "50% "+ yPos + "px"; // Verplaats de achtergrond $bgobj.css (( achtergrondPositie: coördinaten ));

Clip voor IE

Eén ding blijft: oudere versies van IE kunnen geen tags weergeven. De kwestie is eenvoudig op te lossen, we zullen gebruiken standaard oplossing om elementen te creëren die de browser op magische wijze dwingen HTML5-tags te herkennen.

// Elementen maken voor IE document.createElement("article"); document.createElement("sectie");

Daarnaast gebruiken we het bestand css opnieuw instellen zodat alle browsers de pagina op dezelfde manier weergeven.