• Déplacement fond

    Lorsque nous plaçons une image en fond, par défaut, le point de référence est son angle haut-gauche. Si l'animation part de cet angle, pas de souci. Image exemple:

    Si la portion que nous voulons publier est sa partie droite, il nous faut écrire l'attribut background-positon (position du fond) pour que la partie droite apparaisse dans notre cadre. Survol

     

    <div style="width:60vw; height:33.75vw; margin:1vh auto;">

    <p id="bk">&nbsp;</p>

    </div>

    <style><!--

    #bk{width:10vw; height:33.75vw; background:url('http://ekladata.com/SuRLzWIyILEB43XqmE88VpPZ_Ok@1152x648.jpg'); background-position:-50vw 0vw; transform:translate(50vw,0vw); transition:all 1s linear;}

    #bk:hover{width:60vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}

    --></style>

    Le survol fait s'agrandir le paragraphe en largeur et hauteur (ici, id) en même temps et le fond est animé de la même transition (all 1s)

    *****

    La situation se corse, comme on dit à Ajaccio, lorsque l'on veut donner des transitions différentes aux attributs; exemple, la largeur s'anime dès le survol, la position du fond et le positionnement du cadre en font de même, la hauteur suit à 1 seconde et un filtre suit à 2 secondes.

    Dans ce cas, il ne faut pas oublier de donner une transition particulière à chaque attribut: width, background, transform, height et filter

     

    <div style="width:60vw; height:33.75vw; margin:1vh auto;">
    <p id="bk1">&nbsp;</p>
    </div>
    <style><!--
    #bk1{width:10vw; height:10vw; background:url('http://ekladata.com/SuRLzWIyILEB43XqmE88VpPZ_Ok@1152x648.jpg'); background-position:-50vw 0vw; transform:translate(50vw,0vw); filter:grayscale(1);transition:width 1s linear 0s, height 1s linear 1s, transform 1s linear 0s, background 1s linear 0s, filter 1s linear 2s;}
    #bk1:hover{width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw); filter:grayscale(0);}
    --></style>

    La position du fond (background-position) suit l'animation du déplacement (transform:translate).

    J'oublie parfois ce réglage (... et je cherche l'erreur !) alors, je voudrais que d'autres ne l'oublient pas !

    Si vous l'oubliez, la position de l'image de fond sera l'angle haut-gauche sans animation.