02
AVR

jScratchCard - Créer des jeux à gratter avec ce plugin jQuery

Publié le 02/04/10 à 07h04 par DJo

jScratchCard est un plugin jQuery permettant de créer des jeux à gratter (instant gagnant) avec la souris.

jScratchCard - Créez des jeux à gratter jScratchCard - Créez des jeux à gratter

Un plugin original qui vous permettra de faire rêver (ou pas) vos visiteurs pendant un instant !

jScratchCard dispose de plusieurs modes de grattage:

  • Au click de la souris
  • Au passage de la souris

Il est possible de configurer la couleur de la texture à gratter, le niveau d'opacité retiré à chaque passage de la souris, la zone grattée en pixels...

Il est très simple à utiliser, par exemple pour recréer le ticket en or, il suffit de faire la chose suivante:

HTML

<img src="scratchcards.gif" id="card" class="effect">

 

Javascript

$("#card").jScratchcard({
    opacity: 0.5,
    color: '#D4A017',
    stepx: 10,
    stepy: 10
});

 

Facile non ? Le seul inconvénient est qu'on voit les image au chargement de la page. Il serait donc judicieux de mettre une image blanche par défaut puis de la changer dynamiquement en Javascript après le chargement du plugin.

 

Site Officiel

Baraguiné par SorenS le 02/04/10 à 09h02
SorenS sur La Ferme du Web
excellent ce petit truc :) ça permet une animation ou un concours rapidement mis en place.
Un nouveau merci pour la ferme du web !
Baraguiné par le 02/04/10 à 09h49
mmmm... ca ne tourne pas sous IE7... je n'ose meme pas tester sous IE6... idée interessante, mais à travailler pour un emploi convenable, meme sur de petites opérations...
Baraguiné par vjousse le 02/04/10 à 10h01
vjousse sur La Ferme du Web
Manquerait plus qu'il faille que ça marche sous IE 6 :D
Baraguiné par DJo le 02/04/10 à 10h11
DJo sur La Ferme du Web
Ah ouais exact, marche pas sous IE7 ...
Il faut mettre une condition: Si vous voulez gratter, changez de navigateur :D Je suis sûr que ça serait efficace pour convertir des gens sur de vrais navigateurs :p
Baraguiné par Senamion le 02/04/10 à 21h51
Senamion sur La Ferme du Web
Avec la nouvelle version on peu gratter aussi avec IE6 et IE7 (si vous voulez) :)
Baraguiné par le 05/04/10 à 11h06
Pour moi, l'image apparait en premier et en second le cache à gratter. (Sous Chrome). Pas top pour faire découvrir une image...
Baraguiné par Senamion le 05/04/10 à 13h27
Senamion sur La Ferme du Web
C'est mieux que l'image est hidden au debut, après vous pouvez faire:
$('#myImg').show().jScratchcard();

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web