Scratch Reveal
Carte à gratter numérique : un canvas recouvre une récompense texte ; grattez avec la souris ou le doigt, ou cliquez « Tout révéler » en un coup.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0375-root contient un conteneur .sck-container superposant un div .sck-reveal (la récompense : texte, couleur de fond) et un canvas .sck-cover positionné en position: absolute par-dessus. Au chargement, la fonction setup() utilise des dimensions internes fixées à W=300 px et H=150 px (codées en dur), multiplie par devicePixelRatio pour la résolution du canvas, puis remplit le canvas en gris uni. Sur écran Retina, le canvas interne est deux fois plus grand que sa taille affichée, donc les bords du grattage restent nets.
Les événements mousemove et touchmove sur le canvas effacent un cercle de 40 px de rayon à la position du pointeur via ctx.globalCompositeOperation = 'destination-out' : cette opération rend transparent le canvas là où l'on passe, laissant voir le .sck-reveal dessous. touchmove appelle preventDefault() pour bloquer le défilement. L'effacement est permanent : il n'y a pas de réinitialisation automatique.
Un bouton .sck-reveal-btn appelle ctx.clearRect() pour effacer tout le canvas en un clic. Le div .sck-reveal porte aria-live="polite" pour que son contenu soit annoncé par les lecteurs d'écran.
Accessibilité
- Mouvement réduit : le grattage est un geste utilisateur — il n'y a pas d'animation automatique à désactiver. L'expérience est identique sous
prefers-reduced-motion: reduce. Le bouton « Tout révéler » permet de découvrir la récompense sans gratter. - Bouton « Tout révéler » : un bouton natif
<button>efface tout le canvas en un clic ou un appui de touche — alternative au grattage pour les utilisateurs qui ne peuvent pas utiliser la souris. - Annonce de la récompense : le div
.sck-revealportearia-live="polite"; son contenu est annoncé par les lecteurs d'écran quand il devient perceptible (après grattage total ou clic sur « Tout révéler »). Note :aria-liven'annonce le contenu que si le texte change ; assurez-vous que le texte est présent dès le chargement. - Canvas décoratif : le canvas de grattage porte
aria-hidden="true". Toute l'information utile est dans.sck-reveal.
Compatibilité navigateur
Canvas 2D (destination-out) + 2 Ko de JavaScript, aucune dépendance. L'opération destination-out est disponible dans tous les navigateurs modernes. devicePixelRatio disponible partout. Touch events disponibles sur tous les mobiles modernes. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : grattage, effacement total et annonce aria-live identiques dans les trois. Sur Safari iOS, le grattage tactile fonctionne correctement avec touch-action: none.
Sans JavaScript, le canvas reste en place et masque le .sck-reveal — la récompense n'est pas visible. Il est conseillé d'ajouter un lien ou un bouton de révélation statique visible sans JavaScript.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0375-root">
<div class="sck-wrap">
<div class="sck-container">
<div class="sck-reveal" aria-live="polite">YOU WON!</div>
<canvas class="sck-cover" aria-hidden="true"></canvas>
</div>
<button class="sck-reveal-btn" type="button">Tout révéler</button>
<span class="sck-label" aria-hidden="true">Grattez pour révéler</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Récompense à révéler (HTML — contenu de .sck-reveal) |
"YOU WON!" sur fond coloré | Remplacez par n'importe quel HTML : un code promo, une image SVG, un texte de profil. Le fond de .sck-reveal est entièrement personnalisable en CSS. |
Rayon du pinceau de grattage (JS — radius = 40) |
40 px | Diminuez à 20 px pour un grattage plus précis (doigt fin), augmentez à 60-80 px pour effacer rapidement avec un large mouvement. |
Couleur du canvas (JS — fillStyle dans setup()) |
gris (#aaa) | Passez à #c0a060 pour une teinte dorée, à #b0b0b0 pour de l'argent. Vous pouvez aussi utiliser un dégradé (createLinearGradient) ou dessiner un motif avant l'appel à fill(). |
Libellé du bouton de révélation (HTML — contenu de .sck-reveal-btn) |
"Tout révéler" | Remplacez par « Révéler maintenant », « Je capitule ! » ou tout libellé contextuel. |
Taille du canvas (CSS — .sck-container) |
300×150 px | Ajustez la largeur et la hauteur du conteneur. Le canvas se cale automatiquement sur ces dimensions via setup(). |
FAQ
ctx.getImageData() et comptez les pixels transparents (canal alpha = 0). Si le ratio dépasse 70 %, déclenchez votre action (animation de validation, appel API). Attention : getImageData() peut être coûteux si le canvas est grand — espacez les vérifications (toutes les 50 ms, par exemple).setup() à nouveau : elle efface le canvas et le re-remplit. Vous pouvez exposer cette fonction depuis l'extérieur en l'assignant à root._reset = setup.
