Sergio Panagia Blog

Category Archives: MooTools

Image Tween with Element.crossfade for MooTools

Element.crossfade is a MooTools extension to simulate a tween for background-image element’s property. The syntax, in this new version, is very clear: document.id(‘el’).crossfade(‘end_image.jpg’); Just remember your element position property in CSS should be expressly declared (as absolute, relative or fixed), don’t leave it blank. Note: you can customize the fade behavior by setting tween properties [...]

Content Impress: focus user attention on a page element

Quick Demo As web information overload is becoming more and more present in everyday navigation, we have to deal with complex-architecture in which external elements – such as advertising – can seriously decrease user attention on a single lecture. For this reason i created Content Impress as a class for MooTools: it’s based on the [...]

Effetti grafici con Javascript: semplice comparsa e scomparsa con animazione

In un esempio recente su questo blog ho mostrato come ottenere un’effetto slide verticale (simulando un’illusione di movimento grazie ad alcune immagini ad-hoc). Qualcuno mi chiede se è possibile realizzarlo anche con un’interpolazione orizzontale: niente di più facile, MooTools mette a disposizione delle classi che facilitano il lavoro (Fx.Slide, invece del semplice tween utilizzato nell’esempio [...]

Creare context-menu (non convenzionali)

Quick demo Ci sono diverse guide sul web per creare menu-contestuali (quelli che compaiono al right-click, per intenderci) sostitutivi a quelli standard del nostro browser. Ma le bellezze del web stanno, sopratutto, nelle possibilità che la tecnologia è in grado di offrici in tema di sperimentazione e creazione di interfacce grafiche nuove, basate su metafore [...]

Creare menu WordPress-like in due righe di codice con Javascript e CSS

Il sovraccarico cognitivo di cui parlano un po’ tutti di questi tempi, ci spinge a ricercare soluzioni più o meno convenzionali per fornire, nelle nostre applicazioni web, solo l’informazione necessaria alla vista dell’utente. Il backend amministrativo di WordPress utilizza un menu verticale che permette di nasconderne il contenuto premendo un semplice pulsante. L’esempio di questo [...]