Mentre giocavo con le animazioni dei fotogrammi chiave di Webkit, ho scoperto un modo per creare un fantastico dispositivo di scorrimento delle immagini usando solo i CSS. È decisamente un po 'non convenzionale, ma è un ottimo modo per imparare a pensare fuori dagli schemi con quello che puoi fare con CSS3.
Tieni presente che poiché utilizziamo i fotogrammi chiave Webkit, si tratta puramente di un esperimento educativo e funzionerà solo in Safari o Chrome. Poiché più browser inizieranno a supportare le animazioni dei fotogrammi chiave in futuro, questo metodo dovrebbe diventare perfettamente utilizzabile nei tuoi progetti web.
Cosa stiamo costruendo
Slideshow Live Demo: Clicca qui
Demo Live di oblò: Clicca qui
Perché Pure CSS?
Prima che qualcuno si ecciti troppo, voglio riconoscere che, in questo momento, è un lavoro per JavaScript. Anche se alcune anime rare e confuse navigano con JavaScript disattivato, questo lascerà una percentuale molto inferiore del pubblico rispetto al metodo di oggi.
Detto questo, penso che sia importante e anche divertente sperimentare con le tecnologie in arrivo per vedere come codificheremo nel prossimo futuro. Come abbiamo visto nel nostro recente articolo sulla creazione di sfondi colorati a impulsi, le animazioni di fotogrammi chiave Webkit estendono davvero ciò che è possibile con i CSS e sono in realtà abbastanza facili da utilizzare.
Guida introduttiva: HTML di base
Per iniziare, creiamo la pagina come se contenesse solo elementi statici. Non ci preoccuperemo troppo di creare un design di pagina complesso questa volta, solo un semplice contenitore con la presentazione e un titolo.
Con questo in mente, il markup per questo progetto è semplicissimo:
Dopo questo, non dovresti avere altro che una pagina bianca con del testo sopra:
CSS di base
Ora che abbiamo preparato il nostro markup, è tempo di iniziare a modellare la pagina per renderla presentabile. La prima cosa che farò è inserire un margine di base / reset padding, applicare uno sfondo al corpo e centrare il contenitore.
Il reset aiuta semplicemente a cancellare qualsiasi preset del browser e il centraggio del div è facile come applicare una larghezza e impostare i margini sinistro e destro su automatico.
Disegnare il testo
Ora che il nostro background e il nostro contenitore sono impostati, facciamo un po 'meglio il titolo. Il nostro markup ha creato tre sezioni su cui lavorare: il div del titolo, l'h1 e il paragrafo.
Ho iniziato applicando alcuni margini all'intero div e centrando qualsiasi testo all'interno e impostando il colore predefinito su bianco. Successivamente ho applicato alcuni stili di base per i font (usando la stenografia) ai tag h1 e paragraph.
Nota che ho usato "Josefin Sans" per il font. Questo è da Google Font Library, quindi per farlo funzionare assicurati di avere questo frammento nella sezione principale del tuo HTML.
E con ciò, la nostra pagina sta iniziando a sembrare molto più bella!
Disegnare l'immagine
Ora dobbiamo applicare uno sfondo al div di presentazione. Nel prossimo passo faremo molto di più con questo, ma per ora basterà semplicemente scegliere un'immagine segnaposto e applicare una larghezza e un'altezza al div.
La nostra pagina è fantastica a questo punto. Ora che abbiamo capito come vogliamo, possiamo procedere con la sua realizzazione!
Impostazione dell'immagine dello slideshow
Il modo in cui imposteremo questa presentazione è fondamentalmente attraverso l'uso di una versione modificata degli sprite CSS. L'idea è di creare una grande immagine contenente tutte le nostre diapositive per utilizzare le animazioni dei fotogrammi chiave per rivelare parti specifiche dell'immagine in determinati punti dell'animazione.
Se questo non ha ancora senso, non ti preoccupare, è molto più facile di quanto pensi! Per iniziare, dovremo andare in Photoshop e costruire la nostra immagine. Ora, dato che la dimensione che abbiamo impostato per la presentazione è di 465 px di larghezza per 300 px di altezza, dovremo rendere il nostro documento Photoshop 930 px per 600 px (il doppio della larghezza e dell'altezza). Questo ci darà abbastanza spazio per quattro immagini, se vuoi di più, semplicemente ingrandiscila!
Da qui, vuoi inserire quattro immagini, ognuna delle quali è di 465 px per 300 px. Impostali in una griglia senza spazi vuoti e risparmia un JPG a grandezza originale. Il tuo risultato dovrebbe assomigliare all'immagine qui sotto.
Slideshow CSS
Keyframe Webkit Le animazioni sono davvero semplici da utilizzare. Tutto ciò che devi fare è scegliere qualcosa da animare e quindi impostare lo stato di quell'elemento in vari punti dell'animazione, definiti da percentuali. Quindi se si imposta la larghezza di un div a 100px a 0%, 50px a 50% e 10px a 100%, il div si restringerà nel corso dell'animazione.
Oggi animeremo la proprietà position-position. La nostra presentazione è impostata per mostrare solo il quadrante in alto a sinistra della nostra immagine per impostazione predefinita e possiamo usare la posizione di sfondo per spostarla per mostrare gli altri.
Per visualizzarlo, immagina la nostra pagina web come uno sfondo scuro con un buco rettangolare tagliato dentro. L'immagine che abbiamo appena creato viene quindi posizionata sotto quella buca e la sposteremo.
Per prima cosa, vogliamo passare dall'immagine in alto a sinistra all'immagine in alto a destra, quindi andremo a impostare il? Giusto? valore (il primo numero) alla larghezza negativa di un'immagine (465 pixel). Quindi, impostiamo il? Up? valore (il secondo valore) all'altezza negativa di un'immagine (300 px). Alla fine restiamo a -300 sull'altezza ma riportiamo il valore giusto a zero. L'effetto di questo sarà mostrare l'immagine in alto a sinistra, l'immagine in alto a destra, l'immagine in basso a destra e quindi l'immagine in basso a sinistra.
Nota che ho lanciato un po 'di una curva qui e ho impostato tutto a 0 al 10%. Questo perché non mi piaceva che la presentazione iniziasse subito senza darti la possibilità di guardare la prima immagine. Questo si basa semplicemente su una breve pausa.
Inoltre, uno degli elementi più importanti qui è la sintassi all'inizio:? @ - cursore del keyframe webkit ?. Il? @ - webkit-keyframes? parte dice al browser cosa stai definendo con il codice sottostante ma il? slider? parte è un titolo personalizzabile che si assegna all'animazione. Può essere tutto ciò che vuoi, ricorda di usarlo di nuovo nel passaggio successivo quando attiviamo questa animazione.
Attivazione dello slideshow
Lanciare il CSS sopra definisce il comportamento della presentazione, ma non la attiva. Per fare ciò, è necessario aggiungere una nuova riga nel div di presentazione.
Qui ho chiamato il "cursore"? animazione che abbiamo appena definito, quindi impostare la lunghezza su 20 secondi, le iterazioni su infinito e la direzione da alternare (una volta che l'animazione è terminata, andrà indietro all'inizio).
dimostrazione
Con quello, siamo tutti finiti! Guarda la demo live per vederla in azione. Di nuovo, assicurati di utilizzare Safari o Chrome.
Esecuzione alternativa: effetto Porthole
Si noti che questa tecnica non sta realmente utilizzando più immagini, ma sta semplicemente ruotando attorno a una singola immagine. Per questo motivo, puoi ottenere un effetto davvero interessante utilizzando semplicemente una foto di grandi dimensioni.
Per vedere come funziona, ho afferrato un'immagine subacquea e modificato la pagina in alto per avere una sorta di sensazione di oblò oceanico. Il codice è mostrato sotto. Nota che questa volta, invece di far partire automaticamente l'animazione, avviene solo quando l'utente passa sopra l'immagine.
Per lo styling, ho semplicemente arrotondato gli angoli del div in modo che fosse un cerchio e applicato un'ombreggiatura per incastonare per dare quel look ritagliato.
dimostrazione
Per vedere la demo di Porthole, clicca sull'immagine qui sotto.
Conclusione
In sintesi, le animazioni dei fotogrammi chiave Webkit contengono un enorme potenziale per rendere le pagine Web dinamicamente impressionanti senza un brandello di JavaScript. In genere questo tipo di effetto richiederebbe un bel pezzo di codice, ma con i CSS è incredibilmente facile.
Lascia un commento qui sotto e facci sapere cosa pensi dell'effetto. Sei eccitato che il CSS si stia espandendo per includere questi tipi di comportamenti o pensi che questo dovrebbe sempre essere il lavoro di JavaScript? Facci sapere!