Corsi on-line

ClickSpark.js: associare effetti grafici agli eventi JavaScript

ClickSpark.js è il nome di una soluzione scritta in JavaScript e messa a disposizione come utility libera e gratuita per gli sviluppatori che desiderano rendere più coinvolgente la user experience delle proprie Web Applications associando particolari effetti a degli eventi, come per esempio la pressione su un pulsante o il click su un collegamento. In sostanza parliamo di particle effects animati per eventi JavaScript, cioè basati sull'”esplosione” o in generale il movimento di particelle restituiti a livello grafico.

ClickSparkUna volta inclusa la necessaria libreria nelle proprie pagine, clickspark.min.js, i coders potranno definire quali immagini utilizzare per la visualizzazione delle particelle e configurare i parametri che determineranno come, dove e quando queste ultime dovranno essere “liberate”; l’utilizzo del framework jQuery consentirà di aggiungere ClickSpark agli elementi HTML, mentre il lavoro per l’implementazione degli effetti verrà semplificato dal fatto che,  di default, la libreria supporta il click binding automatico. Ciò significa che tramite una semplice istruzione come la seguente:

$('.nome_pulsante').clickSpark();

si potrà associare un effetto onaclick sul pulsante target (nome_pulsante); come dimostra l’esempio seguente, il medesimo risultato sarà poi ottenibile per qualsiasi tag si voglia associare al comportamento predefinito di ClickSpark:

$('h3').clickSpark();

Le opzioni di configurazione comprendono la possibilità di definire il percorso (particleImagePath) all’immagine da utilizzare (ne basterà una, la libreria si occuperà poi di “moltiplicare” le istanze delle particelle), il numero di particelle da visualizzare (particleCount), la velocità dell’animazione (particleSpeed), la dimensione delle singole particelle (particleSize), la velocità della loro rotazione (particleRotationSpeed) e la tipologia di effetto (animationType) da adottare.

$('h3').clickSpark({     
    particleImagePath: '../images/particella.png',     
    particleCount: 30,     
    particleSpeed: 10,     
    particleSize: 15,
    particleRotationSpeed: 18,   
    animationType: 'splash' 
});

Per quanto riguarda le animazioni sono supportati gli effetti “explosion”, “falloff”, “blowright”, “blowleft” nonché il già utilizzato “splash”, tutti impiegabili come parametri da passare alla proprietà animationType. E’ garantita la compatibilità con tutti i browser Web più diffusi compreso Internet Explorer a partire dalla versione 9, mentre l’unica dipendenza necessaria è appunto jQuery. I file sorgenti sono ospitati in un repository scaricabile dalla piattaforma per il Code Hosting GitHub.

Via ClickSpark.js

Post correlati
I più letti del mese
Tematiche