Point d'ancrage d'une image ?

mowh
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

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
Auteur

Voilà le codepen : Ancrage ?

MrCastor

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
Auteur

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

MrCastor

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

mowh
Auteur

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