DOMmy.Cycle.js: gallerie animate con Javascript e DOMmy.js

Abbiamo già parlato di DOMmy.js, una libreria Javascript standalone che “arricchisce” Javascript nativo. Sulla base di questo script è nato il plug-in DOMmy.Cycle.js, che permette di realizzare un’ampia (ed estensibile) gamma di gallerie animate ad effetto ciclico.

Grazie a DOMmy.Cycle.js possiamo realizzare in pochissimi minuti delle gallerie di immagini accattivanti, senza l’ausilio di complessi framework Javascript. L’unica dipendenza di DOMmy.Cycle.js è infatti DOMmy.js, libreria Javascript di pochi kb. Tutti i browser supportati da DOMmy.js sono quindi supportati anche da DOMmy.Cycle.js.

Settare il markup necessario per DOMmy.Cycle.js è estremamente semplice, basta racchiudere una collezione di immagini (quante ne vogliamo) in un elemento contenitore:

<div id="el">
<img src="images/1.jpg" alt="img 1">
<img src="images/2.jpg" alt="img 2">
<img src="images/3.jpg" alt="img 3">
</div>

A questo punto si potrà produrre concretamente l’effetto grazie alla chiamata al metodo che identifica l’animazione ciclica desiderata:

$('el').cycleSlideDiagonal('toUpLeft');
$('el').cycleSlideDiagonal('toUpRight');
$'el').cycleSlideDiagonal('toDownLeft');
$('el').cycleSlideDiagonal('toDownRight');
$('el').cycleShrink('toLeft');
$('el').cycleShrink('toRight');
$('el').cycleShrink('toUp');
$('el').cycleShrink('toDown');
$('el').cycleShift('rotate');

In DOMmy.Cycle.js abbiamo a disposizione un’ampia gamma di animazioni differenti, alcune delle quali sfruttano CSS3 per la realizzazione di effetti davvero interessanti. Inoltre, grazie all’estensibilità di DOMmy.Cycle.js basata sulle classi Javascript, possiamo realizzare effetti personalizzati in modo particolarmente semplice.

Nella sezione demo possiamo osservare DOMmy.Cycle.js in azione, mentre nella pagina ufficiale del progetto possiamo accedere alla documentazione ed al download dello script.

Essendo basato su DOMmy.js, DOMmy.Cycle.js non necessita di alcun framework Javascript per funzionare, l’unica dipendenza è ovviamente dettata da DOMmy.js stesso. Questo dato mette in risalto l’enorme potenzialità che scaturisce dal Javascript nativo, la cui qualità è migliorata esponenzialmente rispetto al passato.

Via DOMmy.Cycle.js