Point d'ancrage d'une image ?

Par mowh, il y a 10 ans

Les bases HTML/CSS

Bonsoir !

J'ai appris récémment à manipuler les animations? J'ai une image d'un terrain "Terraria style" avec un tronc d'arbre sans feuilles, et une autre avec juste les feuilles de l'arbre. J'aimerais animer les feuilles pour faire une illusion de vent et bien les placer sur le haut du tronc. j'ai très bien réussi mais dès que je dezoom.. bah ça se décale.
Je vous montre mon code :
HTML

<div class="terrain"> <img width="100px" class="feuilles" src="img/branches.png" /> </div> .terrain { height: 100vh background-image: url(../img/terrain.png) background-size: 960px background-repeat: repeat-x background-position: bottom } .feuilles { margin-left: 360px margin-top: 470px /*J'y suis allé à tatons, je sais c'est pas bien*/ }

L'ideal serait de définir un poit d'ancrage sur chaque image et aligner les deux points d'ancrages. Ainsi malgré le zoom les images resteront alignées.

Voilà, si vous avez des idées je vous remercie d'avance :)
Bonne soirée !

P.S. j'utilise Sass, peut-être y a-t-il des options supplémentaires qui pourraient aider ?

6 réponses

brokleen, il y a 10 ans

Yo, tu peux mettre ton code sur codepen ?
Ca nous donnera une vision d'ensemble car j'ai du mal à visualiser.

Concernant l'utilisation de sass met le code css compilé mais non minifié.

mowh, il y a 10 ans

Voilà le codepen : Ancrage ?

MrCastor, il y a 10 ans

Salut,

.terrain { position: relative; } .terrain .feuilles { position: absolute; left: de la gauche à ton tronc; bottom: du bas de la vh au haut de ton tronc; }
mowh, il y a 10 ans

Salut MrCastor,
Avec ta méthode les feuilles ne restent pas sur le tronc en changeant la taille de la vh...

MrCastor, il y a 10 ans

Les images de ton codepen ne fonctionnent plus.
position: fixed à la place des relative et absolute ?

mowh, il y a 10 ans

Nope, en fait il faut que je mette le terrain en largeur 100% et les feuilles avec margin left en % et margin bottom en px