animation par un autre élément

animation par un autre élément

Rappel: un élément peut être animé par l'action sur un autre élément, ceci au clic ou au survol. code:#el surv ~ #el anim{attributs).

Les seules contraintes sont:

- que l'élément survolé précède, dans le code html, l'élément animé; leur position dans l'article est celle de votre choix.

- qu'ils soient du même niveau, c'est à dire qu'une division anime une division (<div>), un paragraphe anime un paragraphe (<p>) ou une image anime une autre image (<img).

Le principe s'adaptant à bien des structures, voici simplement quelques exemples: les cadres (div, p) se placent, par défaut, les uns sous les autres; vous pouvez donc en écrire plusieurs avec le même genre d'animation.

La modification d'un élément déplace les autres, en fonction des positionnements choisis; les modifications peuvent être de différentes natures.

Elément 1 survolé

Elément 1 animé
Dans ce cadre, vous pouvez placer texte, image, gif, vidéo...
Dans ce premier exemple, l'élément animé a une hauteur de 0px au départ et de 200px au survol de l'élément 1 et son opacité passe de invisible à opaque.

Elément 2 survolé

Elément 2 animé
Dans ce second exemple, c'est la largeur qui est de 0px et la hauteur reste à 200px.
Au survol de l'élément 2, sa largeur passe à 400px.
idem pour l'opacité

Elément 3 survolé

Elément 3 survolé
L'élément animé peut être indépendant du contenu de la page et se placer où bon nous semble, au dessus d'autres éléments.

<p id="x1">Elément 1 survolé</p>
<p id="x1a">Elément 1 animé</p>
<p id="x2">Elément 2 survolé</p>
<p id="x2a">Elément 2 animé</p>
<p id="x3">Elément 3 survolé</p>
<p id="x3a">Elément 3 survolé</p>

<style></style>