el_debutanti a écrit :
Bonjour gcyrillus,
Si seulement je savais
Pour te donner une idée :
Bon week-end,
ED
bonjour,
okay, erreur similaire à la précédente
* le conteneur à faire glisser est absent ( si tu préfère un span au lieu d'un
custom element c'est pareil)
* le text et les 100vh - Xem ne sont pas raccord non plus ici sur de petits écran
Pour le text miroir , comme on a vu que text-shadow etait inopérant dans chrome, il peut-être doublé par le filter:drop-shadow()
Le texte fait environ 15/16em de longueur , en ajoutant un padding , on peut se servir de ces valeurs pour le déplacement et les miroirs de façon a ce qu'au démarrage et en fin de l'animation, textes et ombrages se superposent en cohérence.
* J'ai mis des couleurs différentes et une bordure pour que tu visualise le déplacent de la boite et des ses ombrages en miroir ainsi qu'une valeur correspondant a la longueur du texte + un petit espace (le padding).
https://codepen.io/gc-nomade/pen/GRQLrzz
Cette longueur de texte ou largeur/hauteur de boite vaudra la peine d'être récupérer en JavaScript et de réinjecter cette valeur dans le CSS via une variable CSS var(). (cela peut faire l'objet d'une autre question )
Cdt
Modifié par gcyrillus (18 Jun 2022 - 14:45)