Slik gir du logoet Slip Scroll -effekten

I dagens veiledning skal vi bruke JavaScript for å lage en enkel, fleksibel, parallax-effekt der en logo tilsynelatende endrer farger med bakgrunnen den er på når brukeren ruller.

Slip Scroll-effekten i handling

Vi skal opprette et "standard" -element som gjelder for plasseringen (posisjon: fast), og en mengde "bevegelige" elementer hvis posisjon er avhengig av det "standard" -elementet. Vi bruker JavaScript for å gjøre dette skje hver gang brukeren ruller.

Merk: for å dekke alle baser jeg har gitt forklaringen i video og skriftlig form. 

Se videoen

Abonner på Tuts + Web Design på Youtube

Les opplæringen

Base Markup

Vi starter med å lage et par inneholdende elementer. La oss lage en av bakgrunnen deres mørk og en lys slik at vi kan få et kontrastfylt bilde som finnes i dem. La oss også gå videre og gjøre vårt første bilde til «standard» bildet ved å gi det en klasse av misligholde, mens de andre bildene vil få klassen av bevegelig.

Basestiler

La oss nå sørge for at bildene våre ikke ender opp med å rulle utenfor beholderne ved å sette inn overløp: skjult. Vi vil også gå videre og si at disse beholderne har en relativ posisjon, slik at de helt posisjonerte elementene vil justere seg mot disse beholderne i stedet for direkte til det faste elementet når vi skriver JavaScript. 

For å kunne rulle, la oss gi disse beholderne a min-høyde av rundt 400px. Og for å holde våre logoer vekk fra kantene, la oss gi dem noe padding av 1em.

.container overflow: hidden; stilling: relativ; Min høyde: 400px; polstring: 1em;  

Hver beholder trenger litt kontrastfarge slik:

.mørk bakgrunn: # 333;  .light background: #fff;  

Og til slutt, som lovet, la oss sette vår standard og flyttbare CSS slik at man sitter fast med siden som brukeren ruller, og den andre beveger seg sammen med den uten å støte på andre elementer:

.standard posisjon: fast;  .moveable posisjon: absolute; 

Det bør ta vare på oppslag og styling. Hvis du ser siden, bør du se standardlogoen rulle ned og gjemme seg bak de andre beholderne, mens alle de bevegelige logoer skal vises som vanlige elementer øverst til venstre for deres respektive beholdere.

Vi presenterer JavaScript

Nå for den morsomme delen, slik at den fungerer med JavaScript.

Først legger vi inn jQuery og vårt tilpassede skript i bunnen av vår index.html:

Opprett og åpne en fil som heter JS / slipScroll.js.

Innenfor den filen er det første som skal gjøres, å opprette en funksjon som kalles setLogo og kaste denne funksjonen til en jQuery-rullegardin, slik at hver gang brukeren ruller en piksel, bryr denne hendelsen. Vi vil også sørge for at vi brann denne hendelsen når brukeren først kommer til siden (før de ruller):

var setLogo = funksjon () ; $ (dokument) .scroll (funksjon () setLogo ();); setLogo (); 

Få ting å jobbe

Nå for den magiske. La oss si at hver eneste forekomst av .bevegelig på siden bør endre CSS topp posisjon til hvor langt standardbildet er fra toppen av siden, minus men langt dette .bevegelig Elementets beholder er fra toppen av siden.

hver (funksjon () $ (dette) .css ('top', $ ('. default'). offset (). topp - $ (dette) .Closest ('. container'). offset (). toppen);); ; 

Oppdater siden din, og voila! Du har nettopp opprettet en pseudo-parallax-rullende effekt fra grunnen til bare noen få linjer med kode.

Konklusjon

Jeg oppfordrer deg til å tinker rundt med denne løsningen. Prøv å spille med JavaScript-funksjonen selv for å se hva slags rare kompensasjoner du får hvis du legger til eller fjerner noen få piksler. Prøv å bruke forskjellige elementer (navigere noen?) I stedet for bare bilder for rullbart innhold.

Jeg håper du lærte mye og gjerne slippe kommentarer nedenfor hvis du har noen spørsmål.