Gli effetti a scorrimento sono di gran moda in questi giorni. Mentre l'utente sposta la pagina verso il basso, il contenuto fa più che spostare lo schermo, diventa vivo e diventa più interessante. Sfortunatamente, non esiste un modo semplice per eliminare questi effetti con puro CSS. Se non conosci JavaScript, sei sfortunato.
È qui che entra in gioco Stroll.js. È una libreria super facile da implementare che rende l'applicazione di effetti di scrolling da capogiro un gioco da ragazzi. Tutto quello che devi fare è incollare un paio di brevi righe di JavaScript, il resto è tutto gestito con HTML e CSS. Continua a leggere e ti mostrerò come funziona.
Incontra Stroll.js
Stroll.js è una piccola libreria JavaScript ordinata che porta un sacco di animazioni accattivanti all'azione di scorrimento sugli elementi dell'elenco. L'idea è che tu abbia un gruppo di elementi in un elenco scorrevole e tu usi Stroll.js per rendere la navigazione più interessante.
La home page del progetto (mostrata sopra) contiene una serie di demo che puoi provare per vedere i tipi di effetti non inclusi. Le animazioni stesse sono in realtà costruite con semplici trasformazioni CSS3, quindi dovresti facilmente essere in grado di aggiungere e personalizzare la libreria con le tue idee.
Costruiamo una demo!
Ogni volta che mi imbatto in un progetto interessante come Stroll.js, voglio immediatamente immergermi, calciare le gomme e vedere come funziona. Leggere la noiosa documentazione va tutto bene, ma non riesco davvero a provare qualcosa di simile finché non lo provo io stesso. Questo è quello che faremo oggi.
demo: Clicca qui per il lancio.
HTML
Per iniziare, sappiamo che avremo bisogno di un elenco perché questo è ciò che è lo stroll.js: animare le pergamene delle liste. Gli elementi della lista nella demo erano solo una semplice riga di testo, ma voglio spingerlo molto oltre per vedere come lo gestisce Stroll.js. Faremo in modo che ogni elemento della lista contenga un'immagine, un titolo e un paragrafo.
Se usi Zen Coding come faccio io, digita quanto segue nel tuo editor HTML (altrimenti, digita manualmente la parte successiva).
Come puoi vedere, abbiamo iniziato con una lista non ordinata, poi gli abbiamo dato un elemento della lista, che contiene i tre elementi che abbiamo appena detto che volevamo. Quando tocchi la scheda o qualsiasi altra scorciatoia usata dal tuo editor, questa si espanderà nel seguente codice HTML:
immagini
Per gli stili di immagine, aggiungeremo un margine di 20px per dare loro un po 'di respiro e un raggio del 50% (guarda ma, nessun prefisso del browser!) Per far girare perfettamente le miniature. Inoltre, sposteremo le immagini a sinistra in modo che il testo appaia accanto a loro anziché sotto di esse.
Tipografia
Per il tipo, dobbiamo definire i nostri stili h2 e paragrafo. Ho usato la stenografia per dare al colpo di testa un trattamento audace, sans-serif e il paragrafo un peso normale, trattamento serif. Notare inoltre che il paragrafo ha un colore leggermente più chiaro per aiutare a differenziare visivamente i due.
Elenco
Ora è il momento per il più grande pezzo di CSS, il pezzo finale che renderà le nostre voci di elenco perfette. Imposta la posizione su relativo, la larghezza a 800 px e l'altezza a 510 px. Quindi applica alcuni margini e il riempimento e assicurati che lo stile elenco sia impostato su nessuno.
La cosa che devi davvero avere ragione è l'overflow. Imposta overflow-x su hidden e overflow-y per scorrere in questo modo in modo che l'elenco sia effettivamente scorrevole.
Ora che abbiamo elaborato gli stili delle liste non ordinate, è tempo di approfondire e impostare gli stili delle voci di elenco. Ancora una volta, imposta la posizione (relativa), l'altezza (200px) e il padding (20px). Quindi imposta i colori per lo sfondo e il tipo, imposta l'overflow su auto e lo z-index su due.
La parte difficile qui è quel secondo selettore. Sto usando nth-child (dispari) per variare il colore di ogni altro elemento della lista, il che aiuta ciascuno a distinguersi dal successivo. Questo non è supportato bene su IE, ma nessuno dei due è Stroll.js quindi lo useremo comunque. Tuttavia, ricorda sempre che puoi utilizzare Selectivizr per aumentare il supporto per i selettori. In definitiva, se gli effetti di scorrimento non sono ampiamente supportati, non è un grosso problema (sono puramente divertenti), ma dovresti rendere l'altro stile visivo più cross-browser possibile.
Controllo avanzamento
La maggior parte del nostro lavoro è fatta! La nostra lista sembra fantastica, tutto ciò che resta da fare è portarlo alla vita con un minimo di JavaScript. Non farà male un po ', lo prometto.
JavaScript
Ora, ho promesso che quando abbiamo avviato questo progetto non avevi bisogno di conoscere JavaScript per procedere.Tuttavia, qui sto lanciando JavaScript a voi! Cosa dà? La verità è che hai bisogno di un po 'di JS, ma un'azione di copia e incolla funzionerà perfettamente ed è facile da personalizzare per il tuo progetto.
Lancia questo codice alla fine del corpo nel tuo HTML.
Vedere? Non era così male. Tutto ciò che devi fare per personalizzarlo è assicurarti di scegliere il giusto ID. Abbiamo usato #main? nel nostro progetto oggi, ma sentitevi liberi di cambiare questo per i vostri usi.
È vivo!
Con quello siamo tutti finiti! Tutto quello che dobbiamo fare per cambiare l'effetto è applicare una classe diversa nella lista non ordinata. Per la demo, ho usato gli effetti flip, curl e tilt.
demo: Clicca qui per il lancio.
Cosa pensi?
Pensare a come rendere gli eventi di scorrimento più interessanti apre un nuovo regno di interessanti possibilità di design. Come con qualsiasi effetto, questi possono essere usati per il bene o per il male. Portarli troppo lontano o abusarne darà una pagina da capogiro che nessuno vorrà usare. Usa Stroll.js con parsimonia e avrà un effetto molto più grande.
Lascia un commento e facci sapere cosa ne pensi di Stroll.js. Ti piacciono le animazioni a scorrimento o preferiresti che gli sviluppatori smettano di trovare nuovi posti dove attaccare più animazioni? Facci sapere!