Effet de « skim » avec Mootools

Popularisé par Apple dans iPhoto ‘08, l’effet de « skim » est une très bon moyen de parcourir une galerie d’images tout en occupant le minimum d’espace possible à l’écran. J’ai porté cet effet pour Mootools.

Particularités du projet

Il existe déjà quelques scripts Mootools qui reproduisent cet effet, alors pourquoi faire ma propre version ? Question de performance, une fois encore.

Lorsque l’on parcours une galerie de 40 photos, en temps normal cela correspond à 40 requêtes HTTP. Fort heureusement, le web moderne a vu naître l’astucieuse technique des « sprites CSS »¹. En combinant ces 40 images en une seule, on réduit la charge serveur et on augmente la performance côté visiteur.

Bien sûr cela est plus contraignant puisqu’il faut générer les sprites, mais d’un autre côté on évite d’avoir à fournir des listes d’images au JavaScript.

Démo et exemple simplifié

Le code se veut relativement flexible puisqu’il peut animer plusieurs galeries simultanément, même si l’offset² des sprites varie. Il peut aussi calculer tout seul le nombre d’images de la galerie par une astuce³.

Vous pouvez jeter un œil à la démo.

Pour utiliser le script, inspirez-vous de l’exemple minimaliste ci-dessous. Le code est présenté avec dans l’ordre : l’HTML, le CSS, puis le JavaScript.

<div id="galerie"></div>

#galerie {
	width:128px; height:128px;
	background:url(img/128.png) no-repeat 0 0;
}

skim('#galerie', 0, 10);

Dans cet exemple, 0 correspond à l’offset² et 10 est le nombre d’images contenues dans le sprite.

Seul le premier paramètre (le sélecteur CSS) est obligatoire ; si l’offset n’est pas précisé, il vaut 0, et si le nombre d’images n’est pas précisé, il est calculé automatiquement⁴.

Note : ce code est sous license MIT comme Mootools.

1. Si quelqu’un connaît une bonne traduction de « sprites CSS », ça m’intéresse. ↩
2. L’offset est l’écart entre les images au sein du sprite. ↩ ↩
3. Il n’existe pas à ma connaissance de moyen standard pour récupérer la taille d’une image de background CSS. ↩
4. Cette méthode automatique fait appel au plugin d’Assets de Mootools. On va essayer de l’éviter si on peut préciser le nombre d’images soit même. ↩