jScratchcard: realizzare un piccolo gratta e vinci con jQuery

L’articolo di oggi è a metà tra qualcosa di utile e un semplice giochino da “regalare” ai nostri utenti. Il plugin per jQuery di oggi è chiamato jScratchcard e ci consente di realizzare un semplicissimo sistema di gratta e vinci senza ricorrere a Flash.

A primo impatto non ho trovato una reale utilità del plugin ma ragionandoci un pò su ho trovato qualche idea interessante. Ad esempio si potrebbe utilizzare, un pò come succede per le riviste che ci arrivano a casa, per “premiare” gli utenti con dei regali all’interno delle pagine web. Un altro utilizzo potrebbe essere migliorare il plugin per farlo diventare una reale lotteria dove, ad esempio, in un determinato giorno, si fa vincere un solo utente tra quelli che “grattano” il gratta e vinci virtuale. Ragionandoci un po’ ho trovato diverse destinazioni d’uso interessanti del plugin ed ho quindi deciso di condividerlo.

 Come funziona il plugin

Il funzionamento del plugin è semplicissimo, come la sua configurazione. Una volta caricata la pagina, è sufficiente cliccare o passare il mouse sul box per “grattare” via la superficie e visualizzare l’immagine di sfondo, come nell’immagine precedente.

Per caricare il plugin nella pagina è sufficiente includere il file Javascript scaricabile a questo indirizzo e richiamare il metodo del plugin sull’immagine che vogliamo rendere grattabile. In pratica, dato un codice HTML come il seguente:

view sourceprint?

1 <img id="scratch" src="image.jpg" alt="image" />

è sufficiente utilizzare il seguente codice per attivare il plugin:

view sourceprint?

1 $('#scratch').jScratchcard();

Come personalizzare il plugin

E’ possibile personalizzare 5 parametri del plugin:

• opacity – ovvero quanto viene “grattato” della superficie – default {‘opacity’: 0.2}
• color – colore di sfondo della superficie – default {color: ‘#666666′}
• stepx – larghezza in pixel di ogni singolo blocco – default {stepx: 10}
• stepy – altezza in pixel di ogni singolo blocco – default {stepy: 10}
• mousedown – se settato a true, bisogna tener cliccato il mouse per grattar via la superficie, altrimenti è sufficiente l’effetto hover  – default {mousedown: true}

Un esempio di personalizzazione dei parametri potrebbe essere il seguente:

view sourceprint?

1 $('#scratch').jScratchcard(

2   opacity: 0.05,

3   color: '#98AFC7',

4   stepx: 20,

5   stepy: 20,

6   mousedown: false

7 );

Demo & Download

E’ possibile visualizzare alcuni esempi di utilizzo o scaricare il plugin attraverso i seguenti link:

Demo Download