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