Corsi on-line

Un set completo di Page Transitions con CSS

Segnalo un interessante articolo, pubblicato su Codrops, dedicato alle transizioni di pagina tramite CSS; si tratta di uno showcase veramente completo che raccoglie praticamente tutte le animazioni che potranno essere applicate per ottenere effetti di navigazione particolari, si parte con dei semplici movimenti basati sullo slide fino all’utilizzo di elementi prospettici come la profondità a cui associare dinamismo tramite trasformazioni tridimensionali.

PageTransitions

Tra le transizioni presenti all’interno del set proposto sarà possibile reperire esempi riguardanti movimenti all’interno dello spazio di visualizzazione, riduzioni in scala, fading in o fading out (comparsa o dissolvenza) e rotazione, per ognuno di essi sono poi disponibili le diverse varianti basate sulla direzione del movimento e sulle relative coordinate tenendo conto delle eventuali modifiche a carico delle pagine stabilite attraverso le regole di stile.

Il risultato del lavoro effettuato potrà essere testato attraverso un’apposita pagina dimostrativa, gli output prodotti saranno compatibili praticamente con tutti i browser più diffusi tranne che con le versioni meno recenti di Internet Explorer (fatte salve le proprietà CSS supportate dagli aggiornamenti di quest’ultimo); è inoltre possibile scaricare da GitHub un’apposita libreria JavaScript, denominata elementTransitions.js, che contiene un wrapper JS + CSS di tutti gli esempi mostrati.

“elementTransitions.js” consente l’introduzione di transizioni direttamente tramite elementi HTML5, viene rilasciata sotto licenza Open Source e per il suo funzionamento necessita del framework jQuery in versione 1.9.1 o superiore.

Via Codrops

Post correlati
I più letti del mese
Tematiche