Smidig parallax. Parallax effekt

Alla tips

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

Artikeln blir kort, men informativ, så på 15 minuter kan du 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 sedan vidare ...

Vad är parallaxeffekt på webbplatsen

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

Hur man gör en parallaxeffekt på en webbplats

Så först och främst inkluderar vi jquery -biblioteket. Som vanligt, mellan rubrikerna:

Nu måste du ladda ner ansluta Simple Parallax Scrolling script. Jag rekommenderar att du använder den komprimerade versionen på en gång, eftersom det inte är nödvändigt att göra ytterligare inställningar i skriptet:

Låt oss nu ta reda på vad som måste skrivas på html -sidan för att vår parallaxeffekt ska fungera.

Smartlanding

Målsidesutveckling

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 -taggen, utan är inställd direkt i attributet i behållaren där vi vill implementera parallax.

På detta kan du i princip avsluta, men några fler ord:

Om det inte finns några andra element i dyket där vi vill implementera parallaxeffekten, måste du ange dess höjd, annars ser du ingenting.
Om designen inte svarar kan du ställa in bildens bredd och höjd direkt i html med hjälp av attributen naturalWidth och naturalHeight.
Du kan flytta bilder med attributet data-position. Det är analogt med bakgrundsposition i css.

Resten av alternativen finns på projektets officiella sida, vilket anges ovan.

Den här artikeln visar hur du skapar en parallaxeffekt på en webbplats med ren CSS med CSS -transformationer och shenanigans med 3d.

Parallax skapas nästan alltid med JavaScript och oftast visar det sig vara resurskrävande på grund av att hängande lyssnare på rullningshändelsen ändras DOM direkt och utlöser onödiga om- och omarrangemang. Allt detta sker asynkront med strömmen, där webbläsaren återger sidan, på grund av vilken rullningen börjar sakta ner och bilden går sönder. Mer korrekta parallaximplementeringar spårar rullning och använder uppskjutna DOM -uppdateringar med requestAnimationFrame. Resultatet är kvalitativt annorlunda, 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, så att webbläsaren kan reglera allt själv genom hårdvaruacceleration. Som ett resultat hanteras nästan alla resurskrävande processer direkt av webbläsarmotorn. Bildfrekvensen (FPS) förblir stabil och bilden blir jämn. Dessutom kan du omedelbart kombinera parallax med andra CSS -funktioner - mediefrågor eller support. Responsive Parallax - Hur är det?

Teori

Innan vi går in på att förstå hur denna mekanism fungerar, låt oss skapa den nödvändiga markeringen:

...

Och grundläggande stilar:

Parallax (perspektiv: 1px; höjd: 100vh; overflow-x: gömd; overflow-y: auto;) .parallax__layer (position: absolut; topp: 0; höger: 0; botten: 0; vänster: 0;) .parallax__layer- -base (transform: translateZ (0);) .parallax__layer -back (transform: translateZ (-1px);)
All magi händer i parallaxklassen. Genom att definiera egenskaperna för höjd och perspektivstil kommer elementets perspektiv att placeras i mitten och skapa en fast 3D -visningsport. overflow-y: auto låter innehållet inuti elementet rulla normalt, med elementets ättlingar ritade i förhållande till ett fast perspektiv. Detta är nyckeln till att skapa en parallaxeffekt.

Därefter klass parallax__layer. Som namnet antyder definierar det innehållslagret som parallaxeffekten kommer att tillämpas på. Ett element med denna klass slits ut ur det allmänna innehållsflödet och placeras för att fylla behållaren.

Slutligen har vi modifierarklasserna parallax__layer - bas och parallax__layer - tillbaka. De behövs för att justera rullningshastigheten för parallaxelementen genom att flytta dem längs Z -axeln (flytta bort eller 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 en förskjutning av ett element längs Z -axeln en bieffekt - elementets dimensioner ändras beroende på om det är närmare eller längre bort från visningsporten. För att fixa detta måste vi skala () transformera så att elementet återges i sin ursprungliga storlek:

Parallax__layer - back (transform: translateZ (-1px) skala (2);)
Skalfaktorn kan beräknas med formeln 1 + (translateZ * -1) / perspektiv). Till exempel, om perspektivet för visningsporten är satt till 1px och vi förskjuter elementet med -2px längs Z -axeln, blir faktorn skala (3).

Parallax__layer - deep (transform: translateZ (-2px) skala (3);)

Lagerhastighetskontroll

Lagerhastigheten styrs av en kombination av perspektiv- och Z -förskjutningsvärden. Objekt med negativa Z -värden rullar långsammare än objekt med positiva Z -värden. Ju större skillnaden från 0, desto mer uttalad parallaxeffekt.
(dvs. translateZ (-10px) kommer att rulla långsammare än translateZ (-1px)).

Skapa olika delar av parallaxeffekten

De tidigare exemplen visade den grundläggande tekniken för att använda enkelt innehåll, men de flesta parallaxplatser delar upp sidan i olika sektioner med olika effekter. Så här kan vi implementera detta i vår metod.

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

...

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

Parallax__group (position: relativ; höjd: 100vh; transform-style: preserve-3d;)
I det här exemplet vill jag att varje grupp ska fylla i visningsporten, så jag ställer in höjd: 100vh, även om antalet för varje grupp kan vara olika om det behövs. transform-style: preserve-3d hindrar webbläsaren från att platta ut parallax__layer-element och position: relative gör att parallax__layer-barnelement kan placeras i förhållande till deras grupp.

En viktig regel att komma ihåg är att när vi grupperar element kan vi inte beskära innehållet i en grupp, eftersom överflöd: dolt på elementet parallax__group kommer att bryta hela parallaxeffekten. Innehållet kommer att få barn att gå utanför gränserna. Därför måste du pilla med gruppens z-index för att se till att innehållet döljs korrekt och visas när användaren rullar på webbplatsen.

Det finns inga hårda eller snabba regler för att arbeta med lager, och olika metoder innebär olika implementeringar. Men för att göra det lättare att felsöka placeringen av lager kan du tillämpa en enkel omvandling av gruppelement:

Parallax__group (transform: translate3d (700px, 0, -800px) rotateY (30deg);)
Ta en titt på följande exempel och lägg märke till felsökningsrutan!

Hej kära bloggläsare. Idag vill jag berätta hur du gör rullningsparallax med JQuery och CSS3.

Till att börja med skulle jag vilja säga att denna effekt verkligen ser väldigt effektiv ut. Och det används mycket på utländskt internet. Tack vare denna parallax skapas så att säga effekten av fördjupning och närvaro. Allt detta tvingar användare att besöka denna webbplats mer och mer, bara för att beundra dess skönhet.

Du kommer säkert ihåg att jag visade flera exempel på sådana sajter som använder parallax när du rullar på sidan. Om du missade den här samlingen, var noga med att kolla in den.

Har du tittat? Vill du ha dig själv? :-) Låt oss skapa.

Och så, låt oss gå.

Hur det fungerar?

Vänner, det visade sig att det finns inget övernaturligt och tungt här. Först skapas en HTML -sida. Sedan skapas eller ritas objekt, till exempel i Photoshop. Efter att allt redan har skapats måste du omedelbart avgöra var vilket objekt ska placeras på sidan, samt med vilken hastighet det kommer att rulla när användaren rullar sidan.

Efter det, till exempel med hjälp av CSS, skapas tre lager (kanske fler) 1,2 och 3. Därefter infogas färdiga objekt i varje lager. Dessa objekt ges den exakta positionen i pixlar på sidan. Och sedan ställer de in rullningshastigheten för varje lager. Vanligtvis rullar 1 lager (längst) långsammare än det andra och så vidare. En annan viktig punkt är att ett z-index ställs in för varje lager. Denna parameter avgör vilket objekt som kommer att ligga bakom vilket.

Med andra ord får vi en sådan skiktad webbplats :-) Men det ser väldigt fint ut.

Html

Först måste du skapa en HTML -sida:

Parallax på rullning på sidan

Rullande parallax exempel

Molnigt, lätt regn

Här är ett exempel på text för att beskriva väderprognosen

Delvis molnigt

Här skriver vi det andra exemplet för delvis molnigt

Åskväder

Tredje exemplet för åskväder

Det är allt

Detta är ett exempel på parallax vid rullning

Som du kan se har klasser redan tilldelats alla objekt på denna sida, som vi kommer att använda vidare i stilar. Och vi har redan tre lager här, som har klasser:

parallax -bg3 - första lagret, överst.
parallax -bg2 - andra lagret, mitten.
parallax -bg1 - och det tredje lagret, det lägsta.

Och färdiga ritningar (objekt) är redan tilldelade vart och ett av de tre lagren.

Vi har också text på sidan som har standardrullning. Den har också en fast position, men den rullar tillsammans med bakgrunden. Även om du också kan ställa in rullningshastigheten för texten, måste du skapa ett separat fjärde lager.

Mellan taggar och glöm inte att bifoga stilarna samt parallaxmanuset självt:

Nu kommer den roliga delen.

CSS

Först måste du ta bort alla marginaler på sidkanterna. Detta görs enligt följande:

Kropp (bakgrund: url (../ img / strange_bullseyes.png) upprepa 100% 0; overflow-x: gömd; höjd: 4550px; radhöjd: 1,5; färg: # 000; font-storlek: 14px; font-family : Arial, sans-serif;)

Vi ställer också in bakgrunden för sidan här, den finns i källorna och ställer in den exakta höjden för sidan, den är lika med 4550px.

Nu för #wrapper -fältet där alla våra objekt ska placeras, måste vi ställa in position: relativ;. Således visar vi våra ritningar var vårt fält är.

#wrapper (position: relativ;)

I det här exemplet kommer vi att använda navigering genom de så kallade sektionerna. Det visar sig vara ett slags stort reglage. Användaren har två alternativ, klicka på etiketten och han kommer automatiskt att flytta till den angivna platsen eller helt enkelt bläddra på sidan på det sätt vi är vana vid. I båda fallen ser det väldigt trevligt ut.

Och här är själva CSS -navigeringskoden:

Nav # primär (z-index: 5; position: fast; topp: 50%; höger: 16px; marginal-topp: -40px;) nav # primär li (position: relativ; höjd: 20px;) nav # primär a ( display: block; bredd: 20px; höjd: 20px; text-indent: -9999px; bakgrund: transparent url ("../ img / nav-dot.png") 4px 4px no-repeat;) nav # primär a: sväva , nav # primär a.aktiv (bakgrund: transparent url ("../ img / nav -dot.png") 4px -16px no -repeat;) nav # primär h1 (position: absolut; höger: 22px; topp: - 7px; display: none; padding: 4px 20px 4px 7px ;; color: #fff; white-space: nowrap; background: transparent url ("../ img / nav-arrow.png") 100% 50% no-repeat ;) nav.next-föregående (marginal: 20px 0 0 0;) a.prev, a.next (display: block; bredd: 15px; höjd: 11px; textindrag: -9999px;) a.prev (marginal: 0 auto 5px auto; bakgrund: transparent url ("../ img / scroll-arrow-up.png") 0 0 no-repeat;) a.prev: hover (bakgrund: transparent url ("../ img / scroll) -arrow-up.png ") 0 -11px no-repeat;) a.next (margi n: 5px auto 0 auto; bakgrund: transparent url ("../ img / scroll-arrow-down.png") -1px 0 no-repeat; ) a.next:hover (bakgrund: transparent url ("../ img / scroll-arrow-down.png") -1px -11px no-repeat;)

Låt oss nu gå vidare till själva lagren.

Textlager och dess position:

#content (z-index: 4; position: relativ; maxbredd: 940px; vaddering: 0 10px; marginal: 0 auto; radhöjd: 1,7;) #innehållsartikel (bredd: 300px;) #bemannad flygning, # ramlös-fallskärm, # engelsk-kanal, # om (padding-top: 105px;) # bemannad flygning (position: absolut; topp: 0px;) # ramlös-fallskärm (position: absolut; topp: 1090px;) # engelska -kanal (position: absolut; topp: 2180px;) #innehåll h1 (marginal: 0 0 25px 0; teckenstorlek: 60px; font-family: Georgia, serif; font-weight: normal; radhöjd: 65px;) #om (position: absolut; topp: 3270px;)

Som du kan se är den översta texten (# bemannad-flygning) inställd på en absolut position på 0px, och den andra texten (# ramlös-fallskärm) är inställd på 1090px, vilket är betydligt lägre. En annan viktig punkt, innehållet är z-index: 4; det översta lagret. Detta görs så att andra lager inte täcker texten.

Nu skapar vi lager från bilder:

Det första lagret är de största molnen (# parallax-bg3):

# parallax-bg3 (z-index: 3; position: fast; vänster: 50%; topp: 0; bredd: 940px; marginal-vänster: -470px;) # bg3-1 (position: absolut; topp: -111px; vänster: 355px;) # bg3-2 (position: absolut; topp: 812px; vänster: 321px;) # bg3-3 (position: absolut; topp: 1628px; vänster: 403px;) # bg3-4 (position: absolut; överst: 2700px; vänster: -85px;)

Andra molnskiktet:

# parallax-bg2 (z-index: 2; position: fast; vänster: 50%; topp: 0; bredd: 1200px; marginal-vänster: -600px;) # bg2-1 (position: absolut; topp: 162px; vänster : 200px;) # bg2-2 (position: absolut; topp: 300px; vänster: 1150px;) # bg2-3 (position: absolut; topp: 543px; vänster: -35px;) # bg2-4 (position: absolut; överst: 1180px; vänster: 250px;) # bg2-5 (position: absolut; topp: 900px; vänster: 890px;)

Och det tredje senaste lagret:

# parallax-bg1 (z-index: 1; position: fast; vänster: 50%; topp: 0; bredd: 1200px; marginal-vänster: -600px;) # bg1-1 (position: absolut; topp: 85px; vänster : -270px;) # bg1-2 (position: absolut; topp: 440px; vänster: 795px;) # bg1-3 (position: absolut; topp: 900px; vänster: -220px;) # bg1-4 (position: absolut ; topp: 1020px; vänster: 450px;)

Låt oss nu se hur hela vår CSS -fil ser ut från källorna:

Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adress, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, liten, strejk, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td, artikel, åt sidan, duk, detaljer, bädda in, figur, figcaption, sidfot, sidhuvud, hgroup, meny, nav, output, rubin, avsnitt, sammanfattning, tid, märke, ljud, video (marginal: 0; vaddering: 0; kant: 0; teckensnittsstorlek: 100%; typsnitt: ärva; vertikaljustering: baslinje;) kropp (radhöjd: 1; ) ol, ul (liststil: ingen;) blockquote, q (citat: none;) blockquote: före, blockquote: efter, q: före, q: after (innehåll: ""; innehåll: none;) tabell (kant -kollaps: kollaps; gränsavstånd: 0;) /*Allmänt *********************************** ***************************** / html (overflow-y: scroll;) body (bakgrund: url (../ img /strange_bullseyes.png) upprepa 100% 0; overflow-x: dold; höjd: 4550px; linjehöjd: 1,5; färg: # 000; teckenstorlek: 14px; font-family: Arial, sans-serif; ) h1 (färg: # 333;) a, a: länk, a: aktiv, a: besökt (-webkit-övergång: färg 0.25s lätt-ut; -moz-övergång: färg 0.25s lätt-ut; -o- övergång: färg 0,25s lätthet; övergång: färg 0,25s lätthet; färg: # 21a97e; kontur: ingen; textdekoration: ingen;) a: sväva (färg: # 000;) img (display: block; ) p (marginal: 1em 0;) /*Linjer ************************************** **************************** / tim (marginal: 0; border: none; border-top: 1px solid # 3b3b3b; border-bottom : 1px fast # 3b3b3b; höjd: 3px;) /*Sidstruktur ********************************** ** **************************** / #wrapper (position: relativ;) #branding (bredd: 100%; bakgrund: #fff; ) #branding h1 (bredd: 940px; vaddering: 10px 15px; marginal: 0 auto; text-transform: versaler; teckensnittstorlek: 18px; font-vikt: fet;) /*Navigering ******* ** ************************************************ ***** / nav # primär (z-index: 5; position: fast; topp: 50%; höger: 16px; margi n -topp: -40px; ) nav # primär li (position: relativ; höjd: 20px;) nav # primär a (display: block; bredd: 20px; höjd: 20px; text -indent: -9999px; bakgrund: transparent url ("../ img / nav-dot.png ") 4px 4px utan upprepning;) nav # primär a: sväva, nav # primär a.aktiv (bakgrund: transparent url (" ../ img / nav-dot.png ") 4px -16px nej -repeat;) nav # primär h1 (position: absolut; höger: 22px; topp: -7px; display: ingen; vaddering: 4px 20px 4px 7px ;; färg: #fff; white -space: nowrap; bakgrund: transparent url ( ". ./img/nav-arrow.png ") 100% 50% ingen upprepning;) nav.next-föregående (marginal: 20px 0 0 0;) a.prev, a.next (display: block; bredd: 15px; höjd: 11px; text-indent: -9999px;) a.prev (marginal: 0 auto 5px auto; bakgrund: transparent url ("../ img / scroll-arrow-up.png") 0 0 no-repeat;) a.prev: hover (bakgrund: transparent url ("../ img / scroll-arrow-up.png") 0 -11px no-repeat;) a.next (marginal: 5px auto 0 auto; bakgrund: transparent url ( "../img/scroll-arrow-down.png") -1px 0 no-repeat;) a.next:hover (bakgrund: transparent url ("../ img/ scroll-arrow-down.png")- 1px -11px utan upprepning;) /*Parallax ************************************** ************************* / /*content* / #content (z-index: 4; position: relativ; maxbredd: 940px; vaddering: 0 10px; marginal: 0 auto; linjehöjd: 1,7;) # innehållsartikel (bredd: 300px;) # bemannad flygning, # ramlös-fallskärm, # engelska-kanal, # om (vadderingstopp: 105px; ) # bemannad flygning (position: absolut; topp: 0p x; ) # ramlös-fallskärm (position: absolut; topp: 1090px;) # engelska-kanal (position: absolut; topp: 2180px;) #innehåll h1 (marginal: 0 0 25px 0; font-size: 60px; font-family: Georgia, serif; font-weight: normal; line-height: 65px;) #about (position: absolut; top: 3270px;) / * förgrund (första, stora moln) * / # parallax-bg3 (z-index: 3 ; position: fast; vänster: 50%; topp: 0; bredd: 940px; marginal-vänster: -470px;) # bg3-1 (position: absolut; topp: -111px; vänster: 355px;) # bg3-2 ( position: absolut; topp: 812px; vänster: 321px;) # bg3-3 (position: absolut; topp: 1628px; vänster: 403px;) # bg3-4 (position: absolut; topp: 2700px; vänster: -85px;) / * midground (Moln) * / # parallax-bg2 (z-index: 2; position: fast; vänster: 50%; topp: 0; bredd: 1200px; marginal-vänster: -600px;) # bg2-1 (position : absolut; topp: 162px; vänster: 200px;) # bg2-2 (position: absolut; topp: 300px; vänster: 1150px;) # bg2-3 (position: absolut; topp: 543px; le fot: -35px; ) # bg2-4 (position: absolut; topp: 1180px; vänster: 250px;) # bg2-5 (position: absolut; topp: 900px; vänster: 890px;) / * bakgrund (moln) * / # parallax-bg1 ( z-index: 1; position: fast; vänster: 50%; topp: 0; bredd: 1200px; marginal-vänster: -600px;) # bg1-1 (position: absolut; topp: 85px; vänster: -270px;) # bg1-2 (position: absolut; topp: 440px; vänster: 795px;) # bg1-3 (position: absolut; topp: 900px; vänster: -220px;) # bg1-4 (position: absolut; topp: 1020px; vänster: 450px;)

JQuery

Och nu kommer vi att ställa in rullningshastigheten för varje lager i lagret, detta görs enligt följande:

/ * Lagerhastighet * / funktion parallaxScroll () (var rullad = $ (fönster) .scrollTop (); $ ("# parallax-bg1"). Css ("topp", (0- (rullad * .25)) + "px"); $ ("# parallax-bg2"). css ("topp", (0- (rullad * .5)) + "px"); $ ("# parallax-bg3"). css ( "topp", (0- (rullad * .75)) + "px");)

Som du kan se har det översta lagret parallax-bg3 den snabbaste rullningshastigheten, det andra lagret har det lägsta och det sista lagret har medelhastigheten.

Så här ser manuset för själva navigeringen ut:

$ ("a.manned-flight"). klicka (function () ($ ("html, body"). animera ((scrollTop: 0), 1000, function () (parallaxScroll ();)); return false; ))); $ ("a.frameless-parachute"). klicka (function () ($ ("html, body"). animera ((scrollTop: $ ("# frameless-parachute"). offset (). top), 1000, function () (parallaxScroll ();)); return false;)); $ ("a.english-channel"). klicka (function () ($ ("html, body"). animera ((scrollTop: $ ("# english-channel"). offset (). top), 1000, function () (parallaxScroll ();)); return false;)); $ ("a.about"). klicka (function () ($ ("html, body"). animera ((scrollTop: $ ("# about"). offset (). top), 1000, function () ( parallaxScroll ();)); return falskt;));

ι

Det är i princip allt, vänner. Om du har några frågor, ställ i kommentarerna. Ses snart.

Vi gör en parallaxeffekt för stora block med bakgrund och för enskilda element på webbplatsen.

Inklusive jQuery

$ .stellar ();

Parallax för artiklar

Ställa in rullningshastigheten för element

Vi ställer in förhållandet i förhållande till standard rullningshastighet.
Förhållande 0,5 kommer att få elementet att rulla med halv hastighet,
förhållande 1 har ingen effekt,
förhållande 2 gör att elementet rullar med dubbelt så hög hastighet.

Om förhållandet är mindre än 1 orsakar fel i visningen av element på sidan, försök ställa in positionen för det elementet: fast; ...

Parallax för bakgrund

Om du vill att bakgrundsbilden ska rulla när sidan rullar lägger du till följande attribut:

Som med elementparallax är förhållandet förhållandet till standardrullning.

För ett förhållande mindre än 1, för att undvika fel i bakgrundsvisningen, är det bättre att ställa in bakgrundsfästet som fast.

På mobiltelefoner är det bäst att inte använda parallax för bakgrunden.

Förresten, bakgrundsbilaga: fast på mobil kanske inte fungerar på grund av beräkningarnas komplexitet, så du måste ange bakgrundsbilaga: rulla för mobil (@media (maxbredd: 768px)).

Ett annat förtydligande är att bakgrundsbilden ska vara större i storlek än höjden på blocket där den används.

För att förhindra att parallax fungerar på mobila enheter (@media (maxbredd: 768px)) kan du ställa in egenskapen för bakgrundsposition för blocket: center center! Viktigt; ...

När jag testade horisontell parallax och förskjutningar hade jag många frågor, men jag lade dem åt sidan och använde denna plugin endast för vertikal parallax.

Det kan finnas problem med IE på grund av bakgrundsbilaga: fixat; - bakgrunden kan röra sig i ryck när du rullar.
Du måste använda separata villkor för IE:

@mediaskärm och (-ms-high-contrast: aktiv), (-ms-high-contrast: none) (.next-gen (bakgrundsbilaga: rulla! viktigt; bakgrundsposition: 0 0! viktigt;))

Ett primitivt exempel för testning

Hic magnam eaque, mollitia delectus ullam cum possimus voluptatem. Et in commodi quam, consequatur magnam, dolorum odio tenetur, omnis possimus nihil suscipit. Earum quo, architecto laboriosam quisquam facilis fugit voluptates..png "alt =" (! LANG: Sun" class="sun-1 sun" data-stellar-ratio=".4"> !}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis quo ducimus veniam debitis, blanditiis modi voluptatum laudantium nemo inventore veritatis cum, ex dolorem necessitatibus, quae quos nam, molestiae est.

Ea sint dolor nemo at dicta enim optio omnis molestias voluptatum rem, cumque provident ad eum. Delectus aperiam cumque, dolorum blanditiis, hic error quos reiciendis. Recusandae distinctio voluptas quidem ab!

* (marginal: 0; vaddering: 0; kantlinje: 0; boxstorlek: border-box;) body (font-size: 1em; font-family: sans-serif;) div (position: relativ; bredd: 100% ; max-bredd: 1920px; marginal: 0 auto; höjd: 600px; bakgrundsstorlek: omslag; z-index: 2; överflöde: dold;) ..jpg) 50% 50% ingen upprepning; ) ..jpg) 50% 50% no-repeat; ) ..jpg) 50% 50% no-repeat; ) .block-text (vaddering: 60px 30px; höjd: auto; teckenstorlek: 1,6em; radhöjd: 1,4;) p (position: relativ; z-index: 2; maxbredd: 960px; marginal: 0 auto;) .sun (position: absolut; z-index: 1;) .sun-1 (höger: 0; topp: 20%;) .sun-2 (vänster: 0; topp: 20%;) .sun- 3 (vänster: 50%; marginal-vänster: -200px; topp: 20%;) sidfot (bakgrundsfärg: # 000; färg: #fff; text-align: center; vaddering: 20px 0;)

Vi ansluter de nödvändiga biblioteken

I js / common.js -fil är sådant innehåll

$ (function () (// Parallax bakgrund // http://markdalgleish.com/projects/stellar.js/docs/ $ .stellar ((responsive: false, horizontalScrolling: false, // krävs så att det inte finns någon horisontell skift));));

Arbetsexempel:

Parallaxrullning, även kallad parallaxrullning, är en speciell teknik som främst används i datorgrafik där bakgrundsbilderna i perspektiv rör sig långsammare än förgrundselementen. Idag är denna teknik mycket relevant och vanlig inom webbdesign. Tidigare användes den mycket inom spelindustrin (för 10-15 år sedan).

Under de senaste åren har parallaxrullning alltmer använts i webbdesign. Detta tillvägagångssätt har ökat i popularitet sedan Nike gjorde om sin webbplats för att använda denna idé. Nedan i urvalet kan du se detta exempel.

Denna teknik har rotat sig inom designområdet bara för att den ser riktigt kreativ och cool ut. Trots den ökande populariteten kan denna effekt alltid implementeras på ett speciellt sätt och mycket framgångsrikt. Ibland, när du rullar, ändras också bakgrundsbilden, men detta krävs inte. Den bästa sidan med denna effekt är att den består av flera lager av bilder som "överlagras" på varandra, och de rör sig alla med olika hastigheter, vilket skapar effekten av tredimensionellt utrymme.

Även om denna effekt ofta tillämpas på detta sätt, betyder det inte att du är begränsad till att skapa en artificiell 3D -effekt. Det kan också tillämpas på olika ikoner, bilder och andra element på sidan, vilket ökar interaktionen mellan besökare och webbplatsen kraftigt.

När de ser denna effekt för första gången tycker de att effekten är mycket intressant. Men efter att ha spenderat mer tid på en webbplats som använder parallax, inser de att det finns mer än bara "intressant".

Prestandafrågor

Även om effekten ser bra ut, har den vissa nackdelar, till exempel prestandaproblem. Under de dagar då Nike byggdes med denna effekt var det bara möjligt med hjälp av javascript / jQuery, vilket kraftigt gjorde sidan tyngre och långsammare. Men då skylldes prestandafel på webbplatsens överlägsna utseende och känsla. Detta innebar att webbplatsens användbarhet försvann helt, eftersom den laddades otroligt långsamt. Detta har blivit det största problemet.

javascript är svårt att återge eftersom tekniken måste styra placeringen av alla element på sidan. Även om detta kanske inte verkar vara en stor sak, är det faktiskt väldigt svårt. javascript, måste du utföra beräkningar för varje pixel på sidan på webbplatsen, som rullas genom att rulla. Beroende på sidhastigheten kan antalet beräkningar uppgå till 100 per sekund. Och kom ihåg att varje element på sidan manipuleras med javascript samtidigt som beräkningarna utförs. Inte överraskande var parallaxeffekten inte bara svår att utforma, utan också svår att ladda om internetanslutningen var långsam.

Många utvecklare rekommenderar att du inte bifogar denna effekt till mer än 2 element på en sida. För flera år sedan var det absolut nödvändigt att testa sidor på genomsnittliga datorer innan de lanserades på en webbplats.

Teknik för en ny era

Även om denna effekt inte är lätt att designa, finns det olika lösningar. Med lanseringen av CSS3 har det blivit mycket enklare att skapa parallaxeffekter.

Slutsatsen är enkel. Allt ditt innehåll finns på en sida, och navigering genom "undersidorna" görs med en CSS3-övergång. I allmänhet är detta principen för den gamla goda tekniken att klicka på ankarlänkar, men den här gången läggs en övergång till den. Du kan se ett bra exempel nedan!

Som du kanske har märkt är allt innehåll på samma sida, och att flytta från en "sida" till en annan sker genom en CSS3 -övergång. Detta är nästan samma effekt som parallax, men oändligt lättare när det gäller sidbelastning i webbläsaren.

Men det är fortfarande en viss skillnad här. Så vitt vi vet är det nästan omöjligt (eller åtminstone mycket svårt) att få delar av samma sida att röra sig i olika hastigheter med hjälp av en CSS3 -övergång. Detta innebär att den verkliga parallaxeffekten inte kan kopieras helt på grund av egenskaperna hos endast CSS3.

Det finns också en annan nackdel här - CSS3 stöds inte av vissa moderna webbläsare. Åtminstone för stunden. Det betyder att du fortfarande måste använda javascript för att skapa en full parallaxeffekt.

javascript i aktion

Denna plugin låter dig binda parallaxeffekt till rullning och mushjul med jQuery. Detta gör att du kan få bakgrundsbilden eller något annat element på sidan att röra sig med en annan hastighet än sidans rullningshastighet, vilket skapar en illusion av djup.

Med det här tillägget kan du enkelt skapa parallaxeffekt när du bläddrar genom webbsidor.

jParallax beskrivs som ett jQuery -plugin som förvandlar element på en sida till absolut placerade lager som rör sig som svar på musrörelser. Skikten rör sig i olika hastigheter, beroende på deras storlek.

Denna plugin är den mest lämpliga för dina behov. Det hjälper dig att skapa en liknande parallaxeffekt genom att använda fördefinierade sökvägar. Även om det är svårt att kalla det mycket användarvänligt i design, kommer det att göra din sida väldigt attraktiv och interaktiv ändå.

Handledning för rullning i parallax

Om du vill lära dig att skapa parallaxeffekt själv, har vi samlat flera självstudier för dig.

: (Parallaxrullning med jQuery)

: (Utveckla en plattform med parallaxrullning)

: (Handledningsartikel om att designa ett sidhuvud i parallaxstil-animering)

: Bygg ett Parallax -rullande webbplatsgränssnitt med jQuery och CSS ()