Sì, sì, lo so. Funziona solo su Safari 3.1 e sulle ultime nightly build di WebKit. Non è quindi cosa che troverà  nel futuro più prossimo la minima occasione per diventare mainstream. Perà credo sia comunque interessante per intuire come cose in apparenza astruse come le animazioni CSS recentemente introdotte sul browser di Apple possano essere usate per effetti di grande impatto a fronte di un codice estremamente semplice e leggero.L'esperimento è quello di un menu fish-eye (demo) messo su da Torrey Rice di SitePen.Incluso nell'esempio anche l'uso di documenti SVG nel contesto dell'elemento img.

Continua a leggere Un menu fish-eye con le animazioni CSS

Categoria: CSS

Grazie a questo plug-in appositamente scritto per la libreria jQuery da Ariel Flesler, è possibile effettuare uno scrolling sugli elementi dotati di overflow, incidendo sia sull'asse x sia sull'asse y. Nella prima demo è possibile scegliere tra tante differenti combinazioni per verificare i diversi risultati, mentre nella seconda è possibile scegliere quali opzioni configurare (easing, duration e cosi via). Una funzionalità  simile è offerta nativamente da MooTools, con la classe Fx.Scroll. Questa la demo (denominata"Fly-Over-Background").

Continua a leggere Scrollare gli elementi con jQuery e MooTools

Categoria: Scripting

Dopo le trasformazioni della settimana scorsa, David Hyatt ci presenta sul blog Surfin' Safari le animazioni CSS. Queste nuove implementazioni proprietarie ci permettono di introdurre effetti di animazione tramite i CSS. Nel post citato è stato presentato solo il tipo più semplice: la transizione. Attraverso questo nuovo strumento si può applicare un' animazione ad un elemento al variare del valore di una delle sue proprietà  (ad esempio in seguito ad un hover). La transizione è controllata da tre proprietà : transition-property serve per indicare a quale proprietà  applicare l'animazione, transition-duration per definire la durata dell'effetto, ed infine transition-timing-function che serve in pratica per definire il tipo di transizione. La generica transition è una forma abbreviata per le tre precedenti. Il post è correlato da esempi funzionanti, ma dovrete avere l'ultima nightly build di Webkit per poterli visualizzare.

Continua a leggere Animazioni CSS per Webkit

Categoria: CSS

Il numero di librerie e framework Javascript per effetti e animazioni è in costante aumento. Presento qui le più recenti: Minikit: pesca un po' da Moo.fx e un po' dai Nifty Corners, e contiene una parte per i form Bernie's better animator class: a detta dell'autore, usa un migliore approccio di codifica dato che non usa l'ereditarietà  tra classi MochiKit Animator: ispirata dalla precedente, permette effetti complessi in una-due linee di codice Run: molte le caratteristiche accattivanti, almeno a giudicare dalla home page: oltre alle animanzioni, un facile supporto per i CSS e gli event listeners Tra una settimana o giù di lì sono sicuro che ne usciranno altre: direi che le librerie crescono come funghi. Ma quali sono i parametri che rendono una buona libreria? A parer mio sono: Compatibilità  cross-browser Semplicità  di utilizzo Esempi Documentazione Estendibilità  Compatezza del codice Innovazione La scelta di una libreria è un compito non facile... se avete dubbi, merita fare un giretto per conoscere le italianissime ByteFx e Moo.fx già  segnalate qui sul blog.

Continua a leggere Librerie di effetti e animazioni Javascript

Categoria: Scripting

Negli ultimi tempi le animazioni sulle pagine web stanno tornando di moda. Non si tratta né di Flash, né di gif animate, né di marquee né tantomeno di Javascript della "vecchia scuola", ma di Javascript principalmente basato sul DOM e gli eventi.Sono diverse le librerie moderne per ottenere animazioni efficaci: Script.aculo.us, Moo.fx, Rico e la recente FACE, solo per fare alcuni nomi. Se vi siete sempre chiesti come sia possibile realizzare effettioni simili e avete un pizzico di conoscenze di Javascript, ecco due ottimi tutorial: il primo è An Introduction to Javascript Animation; il secondo, in due parti: Javascript Animation - Part 1 e Javascript Animation - Part 2.

Continua a leggere Animazioni con Javascript

Categoria: Scripting

Dopo le notissime script.aculo.us e moo.fx ecco FACE (Faruk's Animated CSS Enhancements), una recentissima libreria per ottenere animazioni ed effetti dinamici con Javascript.Dalle parole dell'autore Farouk Ates, che tra l'altro ha introdotto l'uso di FACE nel suo recente redesign: FACE è un modo semplice per aggiungere brio e interattività  ai siti web senza la necessità  di usare Flash. Completamente accessibile, con un'implementazione plug-and-play.[...]àˆ stato sviluppato per consentire agli sviluppatori web sensibili agli standard di aggiungere vita ed energia alle loro pagine senza dover imparare Javascript o Flash: bastano conoscenze matematiche di base e una buona comprensione dei CSS. FACE è interamente costruita sul Javascript e sul CSS che si fornisce per controllare l'animazione. Molto belli gli effetti e sorprendente il peso del file Javascript (meno di 8Kb nella versione non compressa). Sintesi, compatibilità  e cinematica sono davvero le tendenze del nuovo Javascript.

Continua a leggere FACE, animazioni con i CSS e javascript

Categoria: Scripting