Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^

Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…

Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^

Le principe et de générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!

Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.

Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)

Au fond, le plugin peut s’utiliser de toutes les manières :

• Créer des éléments ou utiliser des collections existantes
• Gérer les transitions, des images-clés (keyframes) et s’occuper de la compatibilité entre les navigateurs
• Créez des animations, pleines de graphisme ou seulement automatiser l’insertion DOM
• Gérer en masse les propriétés CSS de l’animations, ou régler finement sur la base de l’index d’élément
• Appliquer des “effets” sur tous les éléments et les gérer dans le temps
• Associer des données JSON (ou pas!), et se servir d’un template dynamique

(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)

Rien ne vaut une démo… donc :

• Démo officielle : http://molokoloco.github.com/jQuery.boxFx/
• “Live” démo sur JSFiddle : http://jsfiddle.net/molokoloco/sBqWq/
• Toutes les sources sur Github : https://github.com/molokoloco/jQuery.boxFx/
• Le script principal commenté : https://github.com/molokoloco/jQuery.boxFx/blob/master/js/jquery.boxFx.js

Voici un exemple concret pour votre site :

$emitter1 = $('div#emitterZone1').boxFx({
	seeds             : '<div>N°{id} - {title}</div>',
	data              : [
            {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'},
            {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'}
        ],
	effect            : '',
	newAtTop          : true,
	stopAtEnd         : 'detach',
	delay             : 4000,
	maxSeeds          : 10,
	emitterRadius     : 0, 
	styles            : {},
	keyframes         : [{
		duration         : '24000ms',
		timingFunction   : 'linear',
		iterationCount   : '1',
		direction        : 'normal',
		steps            : [{
				step: '0%',
				opacity: .7,
				transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) 
			}, {
				step: '30%',
				opacity: 0
			}, {
				step: '70%',
				opacity: 0
			}, {
				step: '100%',
				opacity: .7,
				transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; }
		}]
	}]
});
 
$('a#stop').click(function() { $emitter1.trigger('stop'); });