Créer un système de notification en JavaScript

Créer un système de notification en JavaScript

Tags : HTML, JavaScript
Catégorie : Programmation
Mise en ligne : 7 Mars 2014 à 00:00

Peut être que pour un de vos projets web vous avez l'intention de faire un système de notifications mais le favicon restait statique ? Et bien maintenant vous pourrez le modifier en quelques lignes de JavaScript.

Avec le plugin favico.js vous pourrez créer autant de notifications que vous souhaitez.

Ce plugin, fonctionne assez facilement (vous pourrez créer le même système si vous le souhaitez), il crée juste une nouvelle image qu'il encode en base64 afin de l'ajouter directement au sein de votre page en replacent je favicon déjà présent.

Vous pouvez créer divers types d'animations :

  • slide
  • fade
  • pop
  • popFade
  • sans animation

Vous pouvez aussi changer sa position, sont style (rond, carré), sa couleur de fond ...

Vous pouvez aussi mettre une vidéo, ou même la webcam de votre utilisateur.

Source

Voici quelques exemples d'animations.

Slide :

var favicon=new Favico({
    animation:'slide'
});
favicon.badge(1);

Fade :

var favicon=new Favico({
    animation:'fade'
});
favicon.badge(2);

Pop :

var favicon=new Favico({
    animation:'pop'
});
favicon.badge(3);

<Laisser un commentaire/>

* Champs obligatoire