11528 sujets

JavaScript, DOM et API Web HTML5

Transition entre 2 pages de mon site web

Hello ! Smiley biggrin
Je souhaiterais créer une transition/animation entre deux pages de mon site web telle que lorsque l'on clique sur un bouton on "zoome" jusqu'à rentrer dans l'image pour finalement arriver sur ma deuxième page.
Puisqu'une image vaut mille mots, voici un petit exemple de ce que je voudrais faire :
https://dribbble.com/shots/16957533-Eraf-Portfolio-Website
Je voudrais que ce "zoom" dans l'image s'effectue lorsque l'on clique sur un bouton.
Est-ce possible de coder cela en js/css ?
Merci d'avance pour votre aide !
Modérateur
Bonjour,

Le plus simple semble être de faire l'animation sur le 2e page uniquement.

Quand on regarde l'exemple donné, on s'aperçoit qu'en fait, après le clic sur le bouton, on passe à une autre page, et l'animation n'est alors pas si compliquée que ça à faire. Il y a une image (essentiellement un rectangle noir avec un trou circulaire au milieu) qui est superposé au contenu de la nouvelle page, et l'ensemble est simplement agrandi jusque ça que le trou soit plus grand que l'écran.

Je dirai que ça pourrait se faire avec quelques ligne de css.

Amicalement,
parsimonhi a écrit :
Bonjour,

Le plus simple semble être de faire l'animation sur le 2e page uniquement.

Quand on regarde l'exemple donné, on s'aperçoit qu'en fait, après le clic sur le bouton, on passe à une autre page, et l'animation n'est alors pas si compliquée que ça à faire. Il y a une image (essentiellement un rectangle noir avec un trou circulaire au milieu) qui est superposé au contenu de la nouvelle page, et l'ensemble est simplement agrandi jusque ça que le trou soit plus grand que l'écran.

Je dirai que ça pourrait se faire avec quelques ligne de css.

Amicalement,


Mais si on se rend directement sur la 2è page, l'animation ne se justifie pas vraiment.
Modérateur
Bonjour,

kerlutinoec a écrit :
Mais si on se rend directement sur la 2è page, l'animation ne se justifie pas vraiment.

Bah si. Ça fait me semble-t-il un bel effet dans l'exemple donné en simulant le zoom d'un véritable appareil photo.

Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à