Come dare al tuo logo l'effetto Slip Scroll

Nel tutorial di oggi useremo JavaScript per creare un effetto di parallasse semplice, flessibile in cui un logo sembra cambiare colore con lo sfondo in cui si trova quando l'utente scorre.

L'effetto Slip Scroll in azione

Creeremo un elemento "predefinito" che rimane fedele al suo posizionamento (posizione: fissa), e un gruppo di elementi "mobili" la cui posizione dipende da quell'elemento "predefinito". Useremo JavaScript per farlo accadere ogni volta che l'utente scorre.

Nota: per coprire tutte le basi ho fornito la spiegazione in formato video e scritto. 

Guarda il video

Iscriviti a Tuts + Web Design su Youtube

Leggi il tutorial

Markup di base

Inizieremo creando un paio di elementi contenenti. Facciamo uno dei loro sfondi scuri e una luce in modo da poter contenere un'immagine contrastante. Andiamo avanti e rendiamo la nostra prima immagine l'immagine "predefinita" dandole una classe di predefinito, mentre le altre immagini otterranno la classe di mobile.

Stili di base

Ora assicuriamoci che le nostre immagini non finiscano per scorrere all'esterno dei loro contenitori impostando overflow: nascosto. Andremo avanti e diciamo che questi contenitori hanno una posizione relativa, quindi gli elementi posizionati in modo assoluto si allineeranno a questi contenitori anziché direttamente all'elemento fisso quando scriviamo il nostro JavaScript. 

Per motivi di scorrevolezza, diamo a questi contenitori a min-height di intorno 400px. E per tenere il nostro logo lontano dai bordi, diamo loro un po ' imbottitura di 1em.

.container overflow: hidden; posizione: relativa; altezza minima: 400 px; imbottitura: 1em;  

Ogni contenitore ha bisogno di un colore contrastato così:

.dark background: # 333;  .light background: #fff;  

E infine, come promesso, impostiamo il nostro CSS predefinito e mobile in modo che uno sia bloccato con la pagina mentre l'utente scorre, e l'altro si sta spostando con esso senza imbattersi in altri elementi:

.default position: fixed;  .moveable position: absolute; 

Quello dovrebbe occuparsi del markup e dello styling. Se visualizzi la pagina, dovresti vedere il logo predefinito scorrere verso il basso e nascondersi dietro gli altri contenitori, mentre tutti i loghi mobili dovrebbero apparire come normali elementi nell'angolo in alto a sinistra dei rispettivi contenitori.

Presentazione di JavaScript

Ora per la parte divertente, farlo funzionare con JavaScript.

Innanzitutto caricheremo jQuery e il nostro script personalizzato nella parte inferiore del nostro index.html:

Crea e apri un file chiamato js / slipScroll.js.

All'interno di quel file, la prima cosa che faremo è creare una funzione chiamata setLogo e lancia questa funzione in un evento di scorrimento jQuery in modo che ogni volta che l'utente scorre un pixel, questo evento si attiva. Vogliamo anche assicurarci di attivare questo evento quando l'utente arriva per primo alla pagina (prima di scorrere):

var setLogo = function () ; $ (document) .scroll (function () setLogo ();); setLogo (); 

Fare funzionare le cose

Ora per la magia. Diciamo che ogni singola istanza di .mobile sulla pagina dovrebbe cambiare il suo CSS superiore posizione per quanto lontano l'immagine di default è dalla parte superiore della pagina, meno tuttavia questo .mobile il contenitore dell'elemento è dalla parte superiore della pagina.

var setLogo = function () $ ('. moveable'). each (function () $ (this) .css ('top', $ ('. default'). offset (). top - $ (this) .closest ('. container'). offset (). top);); ; 

Aggiorna la tua pagina e voilà! Hai appena creato un effetto di scorrimento pseudo-parallasse da zero in poche righe di codice.

Conclusione

Ti incoraggio ad armeggiare con questa soluzione. Prova a giocare con la funzione JavaScript stessa per vedere quale tipo di offset strani ottieni se aggiungi o rimuovi alcuni pixel. Prova a utilizzare elementi diversi (naviga chiunque?) Invece di solo immagini per il tuo contenuto scorrevole.

Spero che tu abbia imparato molto e ti senta libero di lasciare commenti qui sotto se hai qualche domanda.