Cum să dați logo-ul dvs. efectul Slip Scroll

În tutorialul de astăzi vom folosi JavaScript pentru a crea un efect simplu, flexibil, parallax, în care o emblemă schimbă aparent culorile cu fundalul pe care se află atunci când utilizatorul scroll.

Efectul derulării Slip în acțiune

Vom crea un element "implicit" care să respecte destinația de plasare (pozitie: fixa) și o grămadă de elemente "mobile" a căror poziție depinde de acel element "implicit". Vom folosi JavaScript pentru a face acest lucru de fiecare dată când utilizatorul scroll.

Notă: pentru a acoperi toate bazele pe care le-am furnizat explicația în format video și scris. 

Priveste filmarea

Abonați-vă la Tuts + Web Design pe Youtube

Citiți Tutorialul

Baze de marcare

Vom începe prin crearea a două elemente care conțin. Să facem unul dintre fundalul lor întunecat și o lumină, astfel încât să putem avea o imagine contrară conținută în ele. Să mergem mai departe și să facem prima noastră imagine imaginea "implicită", oferindu-i o clasă de Mod implicit, în timp ce celelalte imagini vor primi clasa deplasabil.

Stiluri de bază

Acum, asigurați-vă că imaginile noastre nu se termină prin derularea în afara containerelor overflow: ascuns. De asemenea, vom merge mai departe și vom spune că aceste containere au poziție relativă, astfel încât elementele absolut poziționate se vor alinia la aceste containere în loc de direct la elementul fix când scriem JavaScript. 

Din motive de derulare, hai să dăm aceste recipiente a min înălțime din jur 400px. Și să ne ținem logo-urile departe de margini, să le dăm câteva umplutură de 1em.

.container overflow: hidden; poziție: relativă; min-înălțime: 400 px; padding: 1em;  

Fiecare container are nevoie de o culoare contrastantă, astfel:

.întuneric background: # 333;  .light background: #fff;  

Și, în cele din urmă, după cum am promis, hai să ne setăm CSS-ul implicit și mobil, astfel încât unul să fie blocat de pagină în timp ce utilizatorul scroll, iar celălalt se deplasează împreună cu el fără să lovească în alte elemente:

.implicit poziție: fix; . mutabil poziție: absolut; 

Aceasta ar trebui să aibă grijă de marcaj și stil. Dacă vizualizați pagina, ar trebui să vedeți emblema implicită derulată în jos și ascunsă în spatele celorlalte containere, în timp ce toate logo-urile mobile ar trebui să apară ca elemente normale în partea din stânga sus a containerelor respective.

Introducerea JavaScript

Acum, pentru partea distractivă, ceea ce face să funcționeze cu JavaScript.

Mai întâi vom încărca jQuery și scriptul personalizat în partea de jos a paginii noastre index.html:

Creați și deschideți un fișier numit js / slipScroll.js.

În acest fișier, primul lucru pe care îl vom face este să creați o funcție numită setLogo și aruncați această funcție într-un eveniment jQuery de defilare, astfel încât de fiecare dată când utilizatorul scroll un pixel, acest eveniment se declanșează. De asemenea, dorim să ne asigurăm că declanșăm acest eveniment când primul utilizator ajunge la pagină (înainte de a le parcurge):

var setLogo = funcție () ; $ (document) .scroll (functie () setLogo ();); setLogo (); 

Lucrurile de lucru

Acum, pentru magie. Să spunem că fiecare instanță a .deplasabil pe pagina ar trebui să-și schimbe CSS-ul top poziția de până acum, imaginea implicită este din partea de sus a paginii, minus oricum .deplasabil elementul containerului este din partea de sus a paginii.

var setLogo = functie () $ ('movable') fiecare (function () $ (this) .css (' .closest ("container"). offset () top);); ; 

Reîmprospătați-vă pagina și voila! Tocmai ați creat un efect de derulare pseudo-parallax de la zero în doar câteva rânduri de cod.

Concluzie

Vă încurajez să vă împrăștiați cu această soluție. Încercați să jucați cu funcția JavaScript în sine pentru a vedea ce fel de offsets ciudate obțineți dacă adăugați sau eliminați câțiva pixeli. Încercați să utilizați diferite elemente (navigați pe oricine?) În loc de doar imagini pentru conținutul dvs. scrollabil.

Sper că ați învățat multe și să vă simțiți liber să renunțați la comentariile de mai jos dacă aveți întrebări.