jQuery Twinkle, un plugin qui attire l’attention

10 septembre 2011

Twinkle est un plugin jQuery qui permet d’attirer l’attention de vos visiteurs sur certaines parties de votre site web. Le principe de l’outil repose sur des cercles animés avec jQuery et générés soit via l’élément HTML5 canvas, soit via des propriétés CSS3.

Faites scintillez vos éléments HTML

Le plugin possède une API assez complète avec méthodes, options, et effets. Les cercles « lumineux » peuvent être utilisés sur un ou plusieurs éléments HTML. Par défaut, Twinkle s’utilise comme ceci :

$(selector).twinkle();

Les options

Plusieurs paramètres peuvent être utilisés. Ils permettent de personnaliser au mieux votre animation.

  • widthRatio : ratio horizontal de l’animation
  • heightRatio : ratio vertical de l’animation
  • delay : délai avant que le premier effet soit déclenché
  • gap : délai entre deux effets
  • effect : nom de l’effet utilisé
  • effectOptions (radius, color, etc) : options pour un effet personnalisé

Les effets

Twinkle possède nativement quelques effets mais vous pouvez construire facilement vos propres effets en utilisant le paramètre effectOptions. Les effets natifs sont les suivants :

  • splash : un disque qui s’agrandit
  • drop : un cercle qui s’agrandit
  • drops : plusieurs cercles qui s’agrandissent
  • pulse : un disque qui s’agrandit puis rétrécit plusieurs fois de suite
  • orbit : un disque entouré de plusieurs disques

Exemples

Voici un exemple pour déclencher un effet personnalisé.

var options = {
	"effect": "drop",
	"effectOptions": {
		"color": "rgba(0,0,255,0.5)",
		"radius": 100
	}
};

$(selector).twinkle(options);

Autre exemple avec le code suivant qui déclenche l’effet sur ​​le premier élément après 1 seconde puis attend 300 millisecondes à chaque fois avant de déclencher l’effet sur l’élément suivant.

var options = {
	"delay": 1000,
	"gap": 300,
	"effect": "drop"
};

$(selector).twinkle(options);

Twinkle est donc un plugin jQuery pratique pour capter l’attention des visiteurs sur un élément HTML en particulier. L’utilisation des technologies HTML5/CSS3 est aussi une bonne initiative. On peut tout de même regretter l’absence d’un paramètre pour définir l’événement déclencheur (par exemple « rollover »). Il est nécessaire d’utiliser une fonction de l’API.

Requis : jQuery, navigateur compatible HTML5/CSS3
Démonstration : http://larsjung.de/twinkle/
Licence : MIT

Commentaires

  • Salut ! Je suis assez sceptique sur ce genre de plugins. Peut-être que des devs de jeux ou des designers cherchant l’exploit graphique en auront une réelle utilité. Mais j’ai peur qu’ils soient surtout mal utilisé comme on utilisait les GIFs animés au début du siècle (rah mince je pensais pas pouvoir dire ça un jour).
    En tout cas la démo est complète, merci !

    • Oui, on peut s’en servir dans certains cas… mais il ne faut pas en abuser ^^

  • Welcominh

    Pas mal du tout !

  • Haniel74

    Bonjour tout le monde,

    Moi aussi j’utilise ce plug-in et franchement il me plait beaucoup, mais j’utilise aussi ce logiciel : http://goo.gl/9BgEW
    Je peux vous dire que ces deux programmes m’ont vraiment rendu service, car ils marchent du tonnerre tous les deux.

    à bientôt

  • carolmagalhaes7

    Ds7 Recently i used to be really, really lacking in cash and debits were killing me from everywhere!! that was UNTIL i found out how to earn money on the INTERNET. I visited surveymoneymaker p net, and started filling in surveys for money, and really, I’ve been much more able to pay my bills!! I am happy, that I did this! D8Fv