Hallo allemaal. Vandaag vertel ik je over een klein script voor het creëren van een eenvoudig parallax-effect.

Het artikel zal kort maar informatief zijn, dus in ongeveer 15 minuten kunt u parallax aan uw landingspagina toevoegen. Als je dit wilt toevoegen interessant effect naar de site, lees dan verder...

Wat is het parallaxeffect op de site?

Laten we je eerst vertellen wat het is. Het parallaxeffect in webdesign is dus een techniek waarbij achtergrondafbeelding beweegt langzamer dan elementen die zich erboven bevinden. Voor degenen die meer ervaren zijn: ik maak een voorbehoud dat we het parallax-effect niet aan de muiscursor zullen 'binden'. Laten we gewoon een parallaxachtergrond maken. Laten we beginnen.

Hoe maak je een parallax-effect op een website?

Dus allereerst verbinden we de jQuery-bibliotheek. Zoals gebruikelijk, tussen de head-tags:

Nu moet u het Simple Parallax Scrolling-script downloaden en verbinden. Ik raad aan om de gecomprimeerde versie onmiddellijk te gebruiken, aangezien aanvullende instellingen Het is niet nodig om dit binnen het script te doen:

Laten we nu eens kijken wat er op de HTML-pagina moet worden geschreven om ons parallax-effect te laten werken.

Slimme landing Creatie van landing pagina

Data-parallax = "scrollen"

Data-image-src="pad naar afbeelding/bg.png"

Houd er rekening mee dat de afbeelding niet in de header wordt geplaatst met behulp van de img-tag, maar direct als attribuut wordt ingesteld in de container waarin we parallax willen implementeren.

In principe kunnen we hier eindigen, maar nog een paar woorden:

• Als er geen andere elementen in de duik zijn waarin we het parallax-effect willen implementeren, dan moet je de hoogte ervan instellen, anders zie je niets.
• Indien niet gebruikt adaptief ontwerp, kunt u de breedte en hoogte van de afbeelding rechtstreeks in html instellen met behulp van de attributen naturalWidth en naturalHeight.
• U kunt afbeeldingen verplaatsen met behulp van het data-position attribuut. Dit is analoog aan de achtergrondpositie in CSS.

Andere opties vindt u op de officiële projectpagina, die hierboven wordt vermeld.

In beweging betekent parallax een verandering in de locatie van een object tegen een bepaalde achtergrond ten opzichte van een waarnemer die zich op zijn plaats bevindt. Deze term is populair geworden op internet. Vooral een website met dynamische elementen in het ontwerp ziet er interessant uit. Parallax is een manier om een ​​pagina op internet te ontwerpen en wordt door webmasters gebruikt om een ​​groot aantal bezoekers te trekken.

Hoe is parallax?

Parallax scrollen kan zowel verticaal als in een rechte lijn worden gebruikt. Het beste voorbeeld is Nintendo. Velen van ons herinneren het zich met nostalgie computerspellen, weergegeven door de beweging van de hoofdpersonen van de linkerkant van het scherm naar rechts. Het is ook mogelijk om langs een verticale rechte lijn naar beneden te bewegen. vaak gebruikt op internet. Om een ​​verticale schuifregelaar te maken, kunt u JavaScript of CSS 3 gebruiken.

Ze worden gekenmerkt door het beschreven driedimensionale ruimtelijke effect. De makers van het spel gebruikten verschillende achtergrondlagen. Ze verschillen qua textuur en beweging vindt plaats met verschillende snelheden.

Denk niet dat parallax alleen maar gaat over het creëren van een 3D-effect. U kunt bestaande pictogrammen op de pagina verplaatsen. Bovendien ziet het er behoorlijk aantrekkelijk uit. Een bijzonder goede optie is om voor elk van hen een individueel traject te hanteren. In dit geval worden verschillende iconen gebruikt die langs verschillende trajecten bewegen. Dit ontwerp trekt de aandacht.

Beeld komt tot leven

Het is moeilijk om een ​​site te vinden zonder afbeeldingen. Hoogwaardige en demonstratieve tekeningen trekken bezoekers. Maar grootste aandacht verschillende soorten dynamische beelden veroorzaken. Als er beweging is bij het bezoeken van een site, trekt dat immers de aandacht. De kans dat een bronbezoeker terugkeert naar een dynamisch beeld neemt aanzienlijk toe. Leek het alsof het bewoog of niet? Om bezoekers naar de site te trekken, is het daarom de moeite waard om een ​​concept als het parallaxeffect te bestuderen.

Voorbeelden van sites met bewegende beelden:

• hvorostovsky.com;
• www.kagisointeractive.com.

Zoals uit de voorbeelden blijkt, wordt de perceptie verbeterd door een menu dat uitloopt in subitems. Dit element bespaart de bezoekers tijd en is daardoor aantrekkelijk voor hen.

jQuery-bibliotheek

De term jQueryParallax definieert de bibliotheek met dezelfde naam. Dankzij dit is het eenvoudig om het effect van beweging in 3D-formaat te bereiken. IN jQuery-bibliotheek Er ontstaat een driedimensionale perceptie op verschillende manieren. Eén daarvan is het horizontaal en gelijktijdig met verschillende snelheden verplaatsen van achtergrondobjecten. Deze bibliotheek kenmerkt zich door de aanwezigheid van een groot aantal verschillende soorten eigendommen. En de hier beschreven verplaatsing is alleen een klein deel zijn mogelijkheden.

De site ziet er behoorlijk aantrekkelijk uit, voor de creatie waarvan verschillende moderne elementen zijn gebruikt. Eén daarvan is parallax. Voorbeeldsites kunnen er als volgt uitzien:

• www.grabandgo.pt;
• www.fishy.com.br;
• www.noleath.com;
• buysellwebsite.com.

jParallax wordt weergegeven door lagen die bewegen met muisbewegingen. Dynamische elementen kenmerken zich door absoluut ;). Elk van hen wordt gekenmerkt eigen maat en beweging op individuele snelheid. Dit kan tekst of een afbeelding zijn (op verzoek van de makers van de bronnen).

Perceptie van websitebezoekers

Hierna let een persoon er meestal op dat de pagina efficiënt, gemakkelijk en competent is ontworpen. Dit feit dwingt doorgaans respect af. Soms ontstaat er nieuwsgierigheid om andere elementen te proberen. Er zijn een groot aantal identieke sites op internet. Hoe kunt u uw hulpbron speciaal maken?

Als het ontwerp je bevalt, blijft de bezoeker voor een langere periode. De kans dat hij zich aangetrokken voelt tot de geposte informatie neemt dus toe en hij zal interesse tonen. Als gevolg hiervan zal de persoon profiteren van de aangeboden dienst, product of promotie-aanbieding.

Favoriete oude spellen

Het concept van ‘parallax’ zou bekend moeten zijn bij alle fans van consoles uit de jaren 80 en 90. Dit geldt voor spellen:

Mario Bros.

Dodelijke strijd.

Straten van woede.

Maan Patrouille.

Schildpadden in de tijd.

Dat wil zeggen, parallax is een techniek die al een vrij lange periode wordt gebruikt. Deze spellen worden inderdaad met enige nostalgie herinnerd. Ze lijken immers doordrenkt van het karakter van die periode.

De afbeeldingen op het scherm worden gemaakt met behulp van een techniek die parallax scrollen wordt genoemd. Het is niet verrassend dat deze techniek welverdiende populariteit heeft verworven. Dit ontwerpconcept wordt behoorlijk warm ontvangen door degenen die in de jaren 80-90 speelden of de vrije tijd van hun vrienden keken.

Parallax-scrollen

Marketeers van 's werelds toonaangevende merken gebruiken al lang verschillende soorten technische vooruitgang. Zo wordt het mogelijk om zelfs een gewone bezoeker van de site te interesseren.

Parallax scrollen werd met succes gebruikt door Nike. De originele website van het bedrijf is ontwikkeld door ontwerpers Weiden en Kennedy. Maar dit ontwerp bleef niet behouden. De bron werd geleidelijk bijgewerkt in overeenstemming met moderne trends. Activatedrinks.com is een voorbeeld van een site waarvan de vormgeving doet denken aan de vormgeving van Nike-marketeers uit deze periode.

Er mag niet te veel dynamiek zijn

Vergeet niet dat het ontwerp van de site vaak is belangrijkste criterium, die de bezoeker begeleidt. Een slecht uitgevoerde bron geeft de gebruiker meestal de indruk dat het eigenaarbedrijf het niet meent. Maar een website met verschillende soorten aantrekkelijke ontwerpelementen geeft de wens van de eigenaren van de organisatie aan om bezoekers te interesseren.

Hier is het de moeite waard om te onthouden over parallax. Dit is een prachtig hulpmiddel. Maar zelfs zij moeten zich niet te veel laten meeslepen. Omdat de pagina waarop er staat groot aantal verschillende soorten bewegende elementen, behoorlijk moeilijk te begrijpen. Het is het beste om het ontwerp redelijk stijlvol en begrijpelijk te maken.

Moet dynamisch zijn individuele elementen die isolatie vereisen. Er kan ook een tekening zijn die is gemaakt met behulp van lagen die ten opzichte van elkaar bewegen. Vergeet niet dat een website op maat in de eerste plaats is ontworpen voor bezoekers. Het mag geen meesterwerk zijn van een webmaster die al zijn kennis heeft geïnvesteerd. Een dergelijke aanpak zal de perceptie immers alleen maar bemoeilijken.

Hoe u een beweging op de site kunt creëren

Hoe parallax maken? Deze vraag interesseert veel websitemakers. Het is niet nodig om de fijne kneepjes van het schrijven van tags te kennen. Zeer handig in gebruik speciale middelen op internet. Van groot aantal Beschikbare voorstellen omvatten de volgende assistenten:

Plax is een programma dat vrij eenvoudig te gebruiken is. Het heeft de neiging om de pagina beweging te geven door de muis te bewegen.

jQuery Parallax-afbeeldingsschuifregelaar - jQuery-plug-in gebruikt om afbeeldingsschuifregelaars te maken.

Jquery Image Parallax - geschikt voor decoratie transparante tekeningen. Door zijn gebruik van PNG krijgen GIF's diepte terwijl ze door beweging tot leven worden gebracht.

Curtain.js wordt gebruikt om een ​​pagina te maken die is uitgerust met vaste panelen. In dit geval wordt het effect van het openen van de gordijnen waargenomen.

Scrollende parallax: een jQuery-plug-in moet een parallax-effect creëren bij het scrollen met het muiswiel.

Nog enkele handige plug-ins

Zoals u weet heeft informatie de grootste waarde. En wat meer manieren om te bereiken wat u wilt bekend zijn, hoe groter de kans op het verkrijgen van het juiste resultaat. Handige plug-ins die worden gebruikt om dynamiek te creëren:

jQuery Scroll Path - gebruikt om objecten op een opgegeven pad te plaatsen.

Scrollorama is een jQuery-plug-in. Het wordt gebruikt als hulpmiddel voor aantrekkelijk ontwerp materiaal. Dankzij handig scrollen kunt u de tekst op de pagina "nieuw leven inblazen".

Scrolldeck is een jQuery-plug-in. Het is een uitstekende oplossing die wordt gebruikt als presentatie voor websites die als één pagina zijn ontworpen.

jParallax vertegenwoordigt de beweging van lagen, afhankelijk van de beweging van de muisaanwijzer.

Stellar.js is een plug-in waarmee elk element wordt ontworpen met de toevoeging van een parallax-scrolleffect.

Parallax met cursor-snapping

Deze parallax ziet er behoorlijk indrukwekkend uit. Objecten op een sitepagina die op het eerste gezicht bewegingloos lijken, bewegen wanneer ze worden benaderd. Het lijkt alsof ze tot leven komen en het element volgen dat wordt verplaatst.

Eerst moet je stoppen bij de tekening. De vereiste afbeelding wordt in een frame geplaatst en de randen ervan moeten verborgen zijn. De methode is heel eenvoudig en de resulterende tekening ziet er behoorlijk aantrekkelijk uit.

Het parallaxeffect voor een website is een prachtige ontwerpmethode. Het gebruik ervan geeft aan dat er de nodige zorg is besteed aan het creëren van de hulpbron. Daarom is het de moeite waard om aandacht te besteden aan de aangeboden diensten of informatie om te lezen. Dergelijke sites zien er voordeliger uit tegen de achtergrond van identieke, maar eenvoudig ontworpen bronnen.

, Schildpadden in de tijd of het originele spel Maan Patrouille. In deze spellen wordt de parallaxtechniek waargenomen op het moment dat er meerdere zijn achtergrondlagen met verschillende texturen bewegen ze met verschillende snelheden, waardoor het effect van een driedimensionale ruimte ontstaat.

Waarom begon ik over retrogames te praten in een artikel over webontwikkeling? Het eenvoudigste antwoord zou kunnen zijn: 'omdat ze cool zijn', maar nee. Parallax scrollen is een cool ontwerpconcept dat zijn weg vindt naar de wereld van webdesign. Nike was een van de eersten die deze techniek gebruikte groot succes, toen ze marketinggiganten Weiden en Kennedy inhuurden om hun originele Nike Better World-website te ontwikkelen. De Nike Better World-site is sindsdien bijgewerkt en vervangen door een nieuwe, maar er is een andere site die behoorlijk lijkt op hoe Nike's eerste parallax-ontwerp eruit zag: de sportdranksite Activate.

Je hebt waarschijnlijk gemerkt dat wanneer je naar beneden scrollt op een pagina van de site, er verschillende zijn verschillende elementen, op deze pagina, beweeg met verschillende snelheden. Laten we de pagina in de afbeelding hierboven als voorbeeld nemen. Terwijl u naar beneden scrollt op de pagina, ziet u dat de blauwe stippen op de achtergrond (die een beetje wazig zijn) met dezelfde snelheid bewegen als de schuifbalk. Je zult ook zien dat een groep blauwe stippen, die meer gefocust zijn en zich op de voorgrond bevinden, iets bewegen hogere snelheid dan de schuifbalk. De tekst “0 SUIKER | 0 CALORIEËN | NATUURLIJK GEZOET” en de titel van de hoofdpagina “Producten”. Tenslotte zijn er afbeeldingen van het product zelf, zowel klein en onscherp op de achtergrond, als groot, gefocust en op de voorgrond. Productafbeeldingen op de achtergrond bewegen met dezelfde snelheid als de tekst, terwijl productafbeeldingen op de voorgrond sneller bewegen dan de tekst. Dit is een perfecte demonstratie van parallax-scrollen, waarbij verschillende lagen afbeeldingen op elkaar worden geplaatst en allemaal met verschillende snelheden bewegen terwijl je door de pagina scrollt, waardoor een driedimensionaal effect ontstaat.

Parallax scrollen is niet beperkt tot verticaal scrollen op pagina's of scrollen in rechte lijnen. We geven het aan Nintendo om je het perfecte voorbeeld te laten zien om deze bewering te staven. Denk eens terug aan de vroege Nintendo-spellen, waarbij onze helden doorgaans horizontaal van links naar rechts over het scherm bewogen, in plaats van verticaal naar beneden, zoals we op de Activate-site hierboven zagen. Maak een ritje op MarkioKart Wii en laten we het hebben over enkele van de coole dingen die we daar kunnen zien.

Het eerste dat opvalt is de scrollrichting van de pagina: deze is niet verticaal, maar zoals hierboven vermeld, maar aanvankelijk horizontaal. Natuurlijk, het is cool, maar het is ook geen nieuw concept. Je zult ook een parallax-effect opmerken met Yoshi de dinosaurus en schelpen op de achtergrond, Mario en Luigi op de voorgrond, en de hoofdinhoud beweegt met verschillende snelheden terwijl je scrollt. Maar zodra je op de #highlights- en #attack-pagina's komt, is het verplaatsingspad niet langer perfect horizontaal. Hetzelfde geldt voor de overgang tussen de #rediscover- en #snes-pagina's. Afbeeldingen behouden niet alleen hun verschillende snelheid verplaatsingen, maar veranderen ook de algemene richting van horizontaal naar verticaal.

Het is ook de moeite waard om op te merken dat het gebruik van het parallax-effect op uw website niet beperkt mag blijven tot het creëren van een kunstmatig 3D-effect. De site van de Duitse webontwerpstudio Webseitenfactory is een voorbeeld van hoe parallax kan worden gebruikt om verschillende effecten aan een sitepagina toe te voegen, bijvoorbeeld pictogrammen die langs verschillende trajecten bewegen, waardoor ze groter en kleiner worden naarmate de site scrollt.

Parallax scrollen kan ook helpen een site nieuw leven in te blazen die niet veel inhoud bevat. Wat als uw hele site bestaat uit een missieverklaring of een sectie over ons, plus? contactgegevens? Hoogstwaarschijnlijk zou u er één pagina van kunnen maken en onder bepaalde omstandigheden zou u een goede site van één pagina krijgen, maar zal deze door bezoekers worden onthouden? Hoogstwaarschijnlijk niet. Maar wat als je er een beetje parallax aan toevoegt, zoals mensen deden tijdens Spring/Summer?

Mijn eerste indruk was: "Oh, deze site ziet er leuk uit." Maar toen ik begon te scrollen, kreeg ik meteen de indruk: “Wauw, deze site is cool!”. Toevoeging eenvoudig parallaxeffect Het maakt gewoon het verschil tussen goed en gedenkwaardig.

Parallax-scrollen is een goede truc om bij de hand te houden. En het kan altijd worden toegepast, ongeacht of u een complexe website van meerdere pagina's maakt of een eenvoudige visitekaartjeswebsite van één pagina.

Voorbeelden van sites met parallax. Sommige zijn erg cool, ik raad aan ze eens te bekijken:

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 bepaalde interne inhoud bevatten. 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; ) ) Parallax (Grieks) verandering, afwisseling

) is een verandering in de schijnbare positie van een object ten opzichte van een verre achtergrond, afhankelijk van de locatie van de waarnemer. Deze term werd vooral gebruikt voor natuurverschijnselen, in de astronomie en geodesie. Deze verplaatsing van de zon ten opzichte van de pilaar, wanneer deze in water wordt weerkaatst, is bijvoorbeeld parallax van aard.

Dit effect van driedimensionale ruimte wordt bereikt door gebruik te maken van meerdere lagen, die over elkaar heen worden gelegd en met verschillende snelheden bewegen wanneer er wordt gescrolld. Met behulp van deze technologie is het mogelijk om niet alleen kunstmatig te creëren driedimensionaal effect, kunt u het toepassen op pictogrammen, afbeeldingen en andere pagina-elementen.

Nadelen van het parallaxeffect

Het grootste nadeel van parallax zijn problemen met de prestaties van de site. Alles ziet er mooi en stijlvol uit, maar het gebruik van javascript / jQuery, met behulp waarvan het parallax-effect wordt gecreëerd, belast de pagina enorm en vermindert de laadsnelheid aanzienlijk. Dit komt omdat het gebaseerd is op complexe berekeningen: javascript moet de positie van elke pixel op het scherm bepalen. In sommige gevallen wordt de situatie verder gecompliceerd door problemen met de compatibiliteit tussen browsers en platforms. Veel ontwikkelaars raden aan het parallax-effect op maximaal twee pagina-elementen te gebruiken.

Alternatieve oplossing

Met de komst van CSS 3 is de taak een beetje eenvoudiger geworden. Met zijn hulp kun je een zeer vergelijkbaar effect creëren, dat veel zuiniger zal zijn in termen van het verbruik van hulpbronnen. Het komt erop neer dat de inhoud van de site op één pagina wordt geplaatst en dat de verplaatsing door subpagina's plaatsvindt met behulp van de CSS 3-overgangsmethode. Dit is dezelfde parallax, maar met enig verschil: feit is dat het onmogelijk is om beweging met verschillende snelheden te bereiken met alleen CSS 3. Daarnaast, deze standaard niet door iedereen gesteund moderne browsers. Daarom zijn er ook hier moeilijkheden.

Conclusie

Hoewel het parallax-effect populair is, heeft niet iedereen haast om het te gebruiken bij het maken van een website vanwege de hierboven genoemde problemen. Blijkbaar heeft de technologie gewoon tijd nodig om de moeilijkheden die zich hebben voorgedaan te overwinnen. In de tussentijd kan deze optie worden gebruikt op sites van één pagina: op deze manier wordt deze zeker onthouden en kan de gebruiker worden behouden.

Parallax in javascript

• jQuery parallax-scrolleffect - een plug-in die het parallax-effect koppelt aan de beweging van het muiswiel
• Scrolldeck - een plug-in voor het creëren van een parallax-effect
• jParallax - verandert pagina-elementen in absoluut gepositioneerde lagen die bewegen volgens de muis