Sticker.js, une librairie JS pour créer des autocollants

26 février 2014
4 246 vues

Sticker.js est une bibliothèque JavaScript disponible sous licence MIT, permettant de réaliser un effet « autocollant » sur des éléments HTML, notamment des images, sans aucune dépendances (ne requiert pas jQuery), et qui fonctionne avec l’ensemble des navigateurs qui supportent CSS3.

Des stickers HTML

Inspirée par de véritables stickers de super-héros, Sticker.js transforme vos éléments HTML sous forme d’autocollants animés qui se décollent via des transitions et transformations CSS au passage de la souris, le tout agrémenté d’un effet d’ombre et d’opacité. Le script détecte automatiquement le point d’entrée du curseur (gauche, droite, haut, bas) pour animer l’étiquette de façon cohérente avec le mouvement de la souris.

sticker_js

Mise en place de vos stickers

Commencez par télécharger la librairie JS et l’inclure dans votre document, puis définissez vos autocollants avec la structure HTML suivante.

<!-- dom elements -->
<div class="sticker example-1"></div>
<div class="sticker example-2"></div>
<script type="text/javascript" src="sticker.min.js"></script>

Dans votre feuille de style, ajoutez une image d’arrière-plan ou une couleur de fond. Vous pouvez également modifier l’opacité de l’ombre qui apparait lorsque l’autocollant se décolle.

.sticker {
   width: 180px;
   height: 180px;
}

// add image
.example-1 .sticker-img {
   background-image: url(heroes-2.png);
}

// add color
.example-2 .sticker-img {
   background-color: #ff4a85;
}

// change shadow opacity
.example-2 .sticker-shadow {
   opacity: 0.6;
}

Et terminez par l’appel de la méthode init() sur vos éléments ciblés via un ID ou une classe CSS.

<!-- call sticker js -->
Sticker.init('.sticker');

Requis : JavaScript
Compatibilité : Chrome, Firefox, Opera, Safari, IE10+
Démonstration : http://stickerjs.cmiscm.com/
GitHub : https://github.com/cmiscm/stickerjs
Licence : MIT

Commentaires

  • http://www.arthurweill.fr/ Arthur Weill

    Bonjour et merci pour cet article :)
    Quel type d’usage on peut imaginer avec de genre d’effet ? A part pour un site de stickers ou pour styliser quelques liens (comme en bas de la page de démonstration), j’ai un peu du mal à voir les cas d’utilisation ?

    • http://www.megaptery.com/ Pierre

      A part quelques cas spécifiques, je ne vois pas beaucoup de cas d’utilisation ^^