Animer un autre élément

Animer un autre élément

Nous savons animer un élément en le survolant ou en cliquant dessus, mes exemples seront au survol:

<p id="gh1"> </p>
<style></style>

Parfois, le survol de cet élément est difficile: il se trouve au milieu d'autres éléments ou alors, il se déplace ce qui oblige à le suivre dans son mouvement pour que l'animation ne s'arrête pas.

De plus, dans des montages, il est pratique d'animer les éléments par des boutons, pour afficher différentes images.

Solution: animer cet élément au survol ou au clic d'un autre élément visible ou non qui lui, sera fixe.

Dans le cas d'un élément visible, il pourra s'agir d'un bouton visible.

Dans le cas d'un élément invisible, il pourra s'agir d'un bouton invisible, placé au dessus de l'élément animé.

Premier cas: le survol d'un bouton visible anime l'élément:

<p id="gh2"> </p>
<p id="gh3"> </p>
<style></style>

Le symbole ~ (tilde) s'écrit au clavier, en appuyant, en même temps sur Alt Gr et 2 du clavier non numérique.

Exemple: si vous avez plusieurs éléments proches et que le survol de l'élément à animer est difficile:

<p id="gh5"> </p>
<p id="gh6"> </p>
<p id="gh7"> </p>
<p id="gh8"> </p>
<p style="clear: both;">...</p>
<style></style>

Une autre façon de faire est de superposer un bouton invisible, au dessus de l'élément animé: dans cet exemple, j'ai laissé une bordure sur le bouton invisible, pour être plus clair.

<p id="gj1"> </p>
<p id="gj2"> </p>
<p style="clear: both;">...</p>
<style></style>

Ceci convient bien lorsque l'animation est du genre retournement, qui fait perdre le survol.

<p id="gj3"> </p>
<p id="gj4"> </p>
<style></style>