Hur man ger din logotyp Slip Scroll -effekten

I dagens handledning kommer vi att använda JavaScript för att skapa en enkel, flexibel, parallell effekt där en logotyp tycks ändra färger med bakgrunden den är på när användaren rullar.

Slip Scroll-effekten i åtgärd

Vi skapar ett "standard" -element som stämmer med dess placering (position: fast) och en massa "rörliga" element vars position är beroende av det "standard" -elementet. Vi använder JavaScript för att detta ska ske varje gång användaren rullar.

Notera: för att täcka alla baser jag har förklarat i video och skriftlig form. 

Titta på videon

Prenumerera på Tuts + Web Design på Youtube

Läs handledningen

Basmarkering

Vi börjar med att skapa ett par innehållande element. Låt oss göra en av deras bakgrunder mörk och en ljus så att vi kan få en kontrastbild i dem. Låt oss också gå vidare och göra vår första bild till "standard" bilden genom att ge den en klass av standard, medan de andra bilderna kommer att få klassen av rörlig.

Basstilar

Låt oss nu se till att våra bilder inte slutar rulla utanför behållarna genom att ställa in överflöd: dold. Vi kommer också att fortsätta och säga att dessa behållare har relativ position, så de absolut positionerade elementen kommer att anpassa sig till dessa behållare istället för direkt till det fasta elementet när vi skriver vår JavaScript. 

För skullbarhetens skull, låt oss ge dessa behållare a min-höjd av runt 400px. Och för att hålla våra logotyper borta från kanterna, låt oss ge dem lite stoppning av 1em.

.behållare översvämning: dold; position: relativ; minhöjd: 400px; vaddering: 1em;  

Varje behållare behöver lite kontrastfärg så:

.mörk bakgrund: # 333;  .light background: #fff;  

Och till sist, som lovat, låt oss ställa in vår standard- och flyttbara CSS så att man fastnar med sidan som användaren rullar och den andra rör sig med den utan att stöta på andra element:

.standard position: fixed; . omöjlig position: absolut; 

Det ska ta hand om markeringen och styling. Om du tittar på sidan ska du se standardlogotypen rulla ner och gömma sig bakom de andra behållarna, medan alla rörliga logotyper ska visas som normala element längst upp till vänster om respektive behållare.

Introducerar JavaScript

Nu för den roliga delen, gör det att arbeta med JavaScript.

Först laddar vi jQuery och vårt anpassade skript längst ner i vår index.html:

Skapa och öppna en fil med namnet js / slipScroll.js.

Inom den filen är det första vi gör är att skapa en funktion som heter setLogo och kasta den här funktionen i en jQuery-rullningshändelse så att varje gång användaren bläddrar en pixel, bränder den här händelsen. Vi vill också se till att vi bränner den här händelsen när användaren först når sidan (innan de bläddrar):

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

Få saker att fungera

Nu för den magiska. Låt oss säga att varje enskild förekomst av .rörlig på sidan bör ändra sin CSS topp ställning till hur långt standardbilden är från början av sidan, minus men långt här .rörlig elementets behållare är från toppen av sidan.

vardera (funktion () $ this) .css ('top', $ ('. default'). offset (). .closest ('. container'). offset (). top);); ; 

Uppdatera din sida och voila! Du har just skapat en pseudo-parallax-rullningseffekt från början på några få rader kod.

Slutsats

Jag uppmuntrar dig att tinker runt med den här lösningen. Försök spela med JavaScript-funktionen själv för att se vilken typ av konstiga förskjutningar du får om du lägger till eller tar bort några pixlar. Försök använda olika element (navigera någon?) Istället för bara bilder för ditt rullbara innehåll.

Jag hoppas att du lärt dig mycket och gärna släppa kommentarer nedan om du har några frågor.