Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 27: Exercice - Réaliser un album photo à effet de vagues (ou domino)

Toutes les pages

Album photo à effet de vagues (ou domino)

A quoi ça ressemble?

La transition des images se fera de la même manière qu'une vague qui avance (ou les éléments d'un domino qui chutent successivement).

Voilà un extrait d'une photo qui est entrain de s'affichger:

album photo en javascript avec un effet de vagues ou domino

Principe de fonctionnement de cet album photo

Le fonctionnement de cet album repose sur la création de plusieurs DIV (ou autre containers) dynamiquement à l'aide du Javascript. Cet éléments sont mis côte à côte et ils ont tous la même image d'arrière plan qui n'est rien d'autre que la photo que l'on veut afficher. La position de ces arrière-plans (background-position) a été calculée de telle sorte à ce que le rendu final donne une seule est unique image comme à l'aide un puzzle.

L'étape suivante consiste à mettre en place l'animation adéquate tout en veillent à changer l'image d'arrière-plan des éléments à chaque cycle pour donner vie à l'album à effet de vague (ou effet domino).

Réalisation de l'album étape par étape

La vidéo qui suit explique comment réussir la mise en place de cet album photo de A à Z: