Parallaxeffekt html. Dåligt: ​​uppdaterar bakgrundsposition

Parallax (grekiska) förändring, växling) är en förändring i den skenbara positionen för ett föremål i förhållande till en avlägsen bakgrund beroende på observatörens plats. Denna term användes främst för naturfenomen, inom astronomi och geodesi. Till exempel är denna förskjutning av solen i förhållande till pelaren när den reflekteras i vatten parallax i naturen.

Inom webbdesign är parallaxeffekten eller parallaxrullning en speciell teknik när bakgrundsbild i perspektiv rör sig den långsammare än förgrundselement. Denna teknik används allt oftare, eftersom den ser riktigt imponerande och cool ut.

Denna effekt av tredimensionellt utrymme uppnås med hjälp av flera lager som är överlagrade på varandra och rör sig med rullning när du rullar. i olika hastigheter. Med hjälp av denna teknik är det möjligt att skapa inte bara konstgjorda tredimensionell effekt, kan du använda det på ikoner, bilder och andra sidelement.

Nackdelar med parallaxeffekten

Den största nackdelen med parallax är problem med webbplatsens prestanda. Allt ser vackert och stilrent ut, men användningen av javascript / jQuery, med vars hjälp parallaxeffekten skapas, tynger sidan kraftigt och minskar dess laddningshastighet kraftigt. Detta händer eftersom det är baserat på komplexa beräkningar: javascript måste kontrollera positionen för varje pixel på skärmen. I vissa fall kompliceras situationen ytterligare av problem med kompatibilitet mellan webbläsare och plattformar. Många utvecklare rekommenderar att man använder parallaxeffekten på högst två sidelement.

Alternativ lösning

Med tillkomsten av CSS 3 har uppgiften blivit lite lättare. Med dess hjälp kan du skapa en mycket liknande effekt, som kommer att vara mycket mer ekonomisk när det gäller resursförbrukning. Summan av kardemumman är att webbplatsens innehåll placeras på en sida, och rörelse genom undersidor sker med hjälp av CSS 3-övergångsmetoden. Detta är samma parallax, men med viss skillnad: faktum är att det är omöjligt att uppnå rörelse med olika hastigheter med endast CSS 3. Förutom, denna standard stöds inte av alla moderna webbläsare. Därför finns det svårigheter även här.

Slutsats

Även om parallaxeffekten är populär, har inte alla bråttom att använda den när de skapar en webbplats på grund av problemen som nämns ovan. Tydligen tar det bara tid för tekniken att övervinna de svårigheter som har uppstått. Under tiden kan det här alternativet användas på ensidiga webbplatser: på så sätt kommer det definitivt att komma ihåg och kommer att kunna behålla användaren.

Parallax i javascript

• jQuery parallax rullningseffekt - ett plugin som binder parallaxeffekten till rörelsen av mushjulet
• Scrolldeck - ett plugin för att skapa en parallaxeffekt
• jParallax - förvandlar sidelement till absolut positionerade lager som rör sig enligt musen

Hej alla. Idag ska jag berätta om ett litet skript för att skapa en enkel parallaxeffekt.

Artikeln kommer att vara kort men informativ, så på cirka 15 minuter kommer du att kunna lägga till parallax till din målsida. Om du länge har velat lägga till denna intressanta effekt på din webbplats, läs då vidare...

Vad är parallaxeffekten på platsen?

Låt oss först berätta vad det är. Så, parallaxeffekten i webbdesign är en teknik där bakgrundsbilden rör sig långsammare än elementen som är ovanför den. För de mer erfarna kommer jag att reservera att vi inte kommer att "binda" parallaxeffekten till muspekaren. Låt oss bara skapa en parallaxbakgrund. Låt oss börja.

Hur man gör en parallaxeffekt på en webbplats

Så först och främst ansluter vi jquery bibliotek. Som vanligt, mellan head-taggarna:

Nu måste du ladda ner och ansluta Simple Parallax Scrolling-skriptet. Jag rekommenderar att du använder den komprimerade versionen omedelbart, eftersom ytterligare inställningar Det finns inget behov av att göra detta i skriptet:

Nu ska vi ta reda på vad som behöver skrivas på html sida, så att vår parallaxeffekt fungerar.

Smartlanding Skapande av landning sida

Data-parallax="scroll"

Data-image-src="sökväg till bild/bg.png"

Observera att bilden inte placeras i rubriken med hjälp av img-tagg, men sätts direkt som ett attribut i behållaren där vi vill implementera parallax.

I princip kan vi avsluta här, men några fler ord:

• Om det inte finns några andra element i dyket där vi vill implementera parallaxeffekten, måste du ställa in dess höjd, annars ser du ingenting.
• Om den inte används adaptiv design, kan du ställa in bildens bredd och höjd direkt i html med attributen naturalWidth och naturalHeight.
• Du kan flytta bilder med attributet data-position. Detta är analogt med bakgrundsposition i css.

Du kan hitta andra alternativ på den officiella projektsidan, som listas ovan.

| 29.09.2014

God eftermiddag kära läsare! Vårt betyg idag, som består av 10 platser, är tillägnat inte vanliga sajter. Webbplatserna i denna TOP 10-lista har en gemensamt drag– parallaxeffekt.

Speciellt för dem som ännu inte vet vad det är, kommer vi kort att prata om denna effekt, som redan har börjat ta fart snabbt och blir allt mer populär inom webbdesign.

Så, parallaxeffekten, eller parallaxrullning, är en speciell teknik där objekt i bakgrunden i perspektiv rör sig långsammare än objekt i förgrunden. På grund av detta skapas en 3D-effekt, en känsla av tredimensionell rymd uppstår. Parallax rullning – bra väg lägg till stil på en ensidig webbplats, piffa till en infografik, berätta en historia eller visa upp en portfolio. Och en del fungerar moderna designers kan kallas med fullt förtroende konstverk... Det är dock bättre att se en gång än att höra hundra gånger - kolla in våra TOP 10-sajter och ta en titt själv!

Observera: vissa webbplatser med parallax-rullning kan vara resurskrävande på grund av många effekter, så "avmattning" kan inte uteslutas vissa datorer och bärbara enheter.

Grab & Go

Tionde plats i vår ranking upptas av webbplatsen Grab & Go, där parallaxeffekten används för att dekorera och liva upp bilden. När du flyttar markören kan du se hur hus och träd rör sig samtidigt. bakgrund. Håller med, på grund av denna entusiasm finns det en chans att webbplatsen kommer att bli bättre ihågkommen av besökaren.

DigitalHands

DigitalHands, rankad 9:a, använder också parallaxeffekten för att sticka ut vackert och vara minnesvärd för besökarna. Flytta muspekaren och njut av specialeffekten.

Madwell

New York-baserade kreativa byrån Madwell visar upp sin portfölj på startsida plats, skickligt med hjälp av parallaxeffekten. 3D-känslan lämnar inte användaren under hela rullningstiden.

Oakley

Alla produkter behöver en korrekt presentation. Oakley-butikens webbplats använder parallax-rullning för att visa fördelarna med Airbrake MX-glasögonen. Det blev ganska imponerande och informativt, eftersom produkterna kan ses och studeras från alla håll, helt enkelt genom att använda rullningen.

Gör dina pengar avgörande

Få människor bryr sig inte om ämnet privatekonomi. Webbplatsen Make Your Money Matter, som tog 6:e plats i vårt betyg, avslöjar i en tillgänglig form för tittarna fördelarna med en kreditförening och talar om bankernas nackdelar. Här kan du använda en kalkylator som visar hur mycket vinst bankerna får från kundinvesteringar, och även hitta filialer till kreditkooperativ efter postnummer.

Space Needle

Vill du utforska Seattle från 184 meter över marken? Space Needle-webbplatsen tar dig med på en virtuell promenad genom stadens mest kända landmärke - Space Needle, som betyder "space needle" på engelska. Detta torn är 184 m högt, 42 m brett och väger 9 550 ton tål orkaner med vindhastigheter på upp till 320 km/h och jordbävningar upp till magnituden 9,1. Dessutom har tornet 25 åskledare. Utmärkande drag Space Needle är ett observationsdäck på 159 meters höjd, en SkyCity-restaurang och en presentbutik. Från toppen kan du se centrala Seattle, Mount Rainier, Cascade Mountains, Eliot Bay och de omgivande öarna.

Peugeot Hybrid4 - Graphic Novel

Den största franska biltillverkaren Peugeot presenterade hybriddrivsystemet Hybrid4 på ett ganska ovanligt sätt. En spännande serie öppnar sig framför våra ögon (som för övrigt kan ställas in på automatisk uppspelning), där huvudpersonens uppgift är att skaffa hemlig data och lämna utan att hamna i problem. För framgångsrikt genomförande drift tvingas den att växla mellan fyra olika körlägen, som efterliknar Peugeot Hybrid4-teknik – maximal prestanda och dynamik (Sport), fyrhjulsdrift och maximalt dragläge (4WD), balans mellan prestanda och ekonomi (Auto), tyst drift (ZEV).

The Walking Dead

Så vi har kommit till tredje plats i vår lista över TOP-sajter, som går till The Walking Dead-projektet. När man skapade sajten, som främst väckte uppmärksamheten från många fans av Walking Dead-serien, användes HTML5, CSS3, JavaScript och, naturligtvis, parallaxeffekten. Utvecklarna har gjort ett bra jobb med att få alla dessa teknologier att fungera tillsammans och på alla plattformar. När användaren går in på sidan och börjar scrolla ser användaren en serietidningsberättelse om hur skådespelare förvandlas till zombies.

Ett unikt och oefterhärmligt projekt, en del av Sonys "Be Moved"-kampanjkampanj, imponerar med sin volym, dynamik och omtänksamhet in i minsta detalj. Du kommer förmodligen inte hitta en bättre produktpresentation än Sonys. Inga ord behövs - bara scrolla ner och njut!

Platt vs. Realism

Och slutligen nådde vi förstaplatsen i vår ranking, som togs av Flat vs. Realism är idén från den interaktiva byrån inTacto. Detta nyårsprojekt med spektakulär grafik (och musik!) är ett minispel av fightinggenren med en intressant bakgrund, där det finns en konfrontation mellan representanter för två typer av design - realistisk och platt. Efter att ha fokuserat på huvudholivaren från slutet av 2013 - början av 2014, hade skaparna rätt: efter det att det släpptes väckte detta imponerande verk omedelbart en sensation och blev ett populärt diskussionsämne i bloggar och nyheter.

Sajtutvecklarna lyckades kombinera parallax-rullning och ett HTML5-spel. "Vi ville försäkra oss om att allting sker smidigt och utan dröjsmål när du bläddrar igenom webbplatsen från början till slut. För att göra detta använde vi AJAX, vilket gjorde det möjligt för oss att uppdatera data i bakgrund", förklarade den kreativa chefen för byrån Alejandro Lazos. Projektet presenterades för publiken i slutet av 2013, innan nyår. Gör dig redo att scrolla, det finns många spännande saker som väntar på dig!

Obs: Tyvärr kan vissa webbplatser ändra sin design med tiden.

Den här artikeln visar hur du använder CSS-transformationer och 3D-sken för att skapa en parallaxeffekt på en webbplats med ren CSS.

Parallax skapas nästan alltid med använder JavaScript och oftast visar det sig vara resurskrävande, på grund av att lyssnare kopplas till scroll-händelsen, direkt modifierar DOM och utlöser onödiga omritningar och omarrangemang. Allt detta sker asynkront med tråden där webbläsaren renderar sidan, varför rullningen börjar sakta ner och bilden går i bitar. Bättre parallaximplementationer spårar rullning och använder lata DOM-uppdateringar med requestAnimationFrame. Resultatet är ett kvalitativt annorlunda sådant, men varför inte bli av med JavaScript helt och hållet?

Att flytta parallaxeffekten till CSS sparar dig från prestandaproblem och onödiga manipulationer, vilket gör att webbläsaren kan reglera allt själv med hårdvaruacceleration. Som ett resultat bearbetas nästan alla resurskrävande processer direkt av webbläsarmotorn. Bildhastigheten (FPS) förblir stabil och bilden blir jämn. Dessutom kan du omedelbart kombinera parallax med andra CSS-funktioner - mediefrågor eller stöder. Responsiv parallax - vad är det?

Teori Innan vi fördjupar oss i att förstå hur denna mekanism fungerar, låt oss skapa den nödvändiga uppmärkningen:

... ... ...
Och grundläggande stilar:

Parallax (perspektiv: 1px; höjd: 100vh; overflow-x: dold; overflow-y: auto; ) .parallax__lager (position: absolut; topp: 0; höger: 0; botten: 0; vänster: 0; ) .parallax__lager- -bas ( transform: translateZ(0); ) .parallax__layer--back ( transform: translateZ(-1px); )
All magi sker i parallaxklassen. Genom att definiera egenskaperna för höjd- och perspektivstil ställs elementets perspektiv till mitten, vilket skapar en fast 3D-vyport. overflow-y: auto kommer att tillåta innehållet inuti elementet att rulla normalt, medan elementets avkomlingar kommer att ritas i förhållande till ett fast perspektiv. Detta är nyckeln till att skapa parallaxeffekten.

Därefter klassen parallax__lager. Som namnet antyder definierar det innehållsskiktet som parallaxeffekten kommer att tillämpas på. Ett element med denna klass dras ut ur det allmänna innehållsflödet och placeras för att fylla dess behållare.

Slutligen har vi modifieringsklasserna parallax__layer--base och parallax__layer--back. De behövs för att reglera rullningshastigheten för parallaxelement, flytta dem längs Z-axeln (ta bort dem eller föra dem närmare visningsporten). För korthetens skull har jag bara gjort två rullningshastigheter - vi lägger till några fler senare.

Djupkorrigering Eftersom parallaxeffekten skapas av 3D-transformationer, har förflyttning av ett element längs Z-axeln bieffekten att storleken på elementet ändras beroende på om det är närmare eller längre bort till visningsporten. För att fixa detta måste vi tillämpa en scale()-transformation så att elementet ritas till sin ursprungliga storlek:

Parallax__lager--tillbaka ( transformera: translateZ(-1px) skala(2); )
Skalningskoefficienten kan beräknas med formeln 1 + (translateZ * -1) / perspektiv) . Till exempel, om viewport-perspektivet är inställt på 1px och vi förskjuter elementet med -2px på Z-axeln, då kommer faktorn att vara scale(3) .

Parallax__lager--djupt ( transform: translateZ(-2px) skala(3); )

Justering av lagerhastighet Lagerhastigheten styrs av en kombination av perspektiv- och Z-offsetvärden. Element med negativa Z-värden rullar långsammare än element med positiva Z-värden. Ju större skillnaden är mellan värdet och 0, desto mer uttalad blir parallaxeffekten.
(dvs translateZ(-10px) rullar långsammare än translateZ(-1px)). olika områden parallaxeffekt De tidigare exemplen demonstrerade den grundläggande tekniken att använda enkelt innehåll, men de flesta parallaxsajter delar upp sidan i olika avsnitt med olika effekter. Så här implementerar du det i vår metod.

Först behöver vi ett parallax__group-element för att gruppera våra lager:

... ... ...
CSS för det skulle se ut så här:

Parallax__grupp (position: relativ; höjd: 100vh; transform-stil: bevara-3d; )
I det här exemplet vill jag att varje grupp ska fylla visningsporten, så jag anger höjd: 100vh , även om numret för varje grupp kan vara olika om det behövs. transform-style: preserve-3d förhindrar webbläsaren från att platta till parallax__lagerelement, och position: relativ tillåter underordnade parallax__lagerelement att placeras i förhållande till sin grupp.

En viktig regel att komma ihåg är att när vi grupperar element kan vi inte trimma innehållet inuti gruppen, eftersom overflow: dold på parallax__group-elementet kommer att bryta hela parallaxeffekten. Oklippt innehåll kommer att resultera i barnelement kommer att gå över gränserna. Därför måste du leka med z-index-värdet för gruppen för att vara säker på att innehållet kommer att döljas och visas korrekt när användaren rullar på sidan.

Det finns inga hårda eller snabba regler när det gäller att arbeta med lager och olika metoder innebär ett annat genomförande. Men för att förenkla felsökning av placeringen av lager kan du tillämpa en enkel transformation av gruppelement:

Parallax__grupp (omvandla: translate3d(700px, 0, -800px) rotateY(30deg); )
Ta en titt på nästa exempel och var uppmärksam på debug-kryssrutan!