28172 sujets

CSS et mise en forme, CSS3

Arrêter une animation à top: 0px

Bonjour,
I'm come back Smiley hum
Alors c'est très compliqué, j'ai trois animations :
a/1 ligne de droite à gauche
b/1 ligne de bas en haut
c/1 ligne à 180 degré de bas en haut.
Voilà ce que j'aimerais faire :
-arrêter (bloquer) le "a" à gauche (0px)
-arrêter (bloquer)le "b" en haut (top: 0px)
-arrêter (bloquer) le "c" en haut (top: 0px ou right: 0 ?)
Voici mes CSS :

.vertical {
  position: absolute;
  grid-column: span 4 / -1;
  grid-row: 1 / 3;
  left: 0; 
  top: 0;
  right: 0;
  bottom: 0;
  height:100%;

}
.vertical>h2{
  margin: 0;
  grid-column:1;
  grid-row:2;
  display:grid;
  overflow:hidden;
  transform: scale(-1); 
  font-size:18vw;
  color:ivory;
}
.vertical>h2> up-text{ 
  display:block;
  margin:auto 0;
  padding:1em 0 ;
  z-index:1;
  writing-mode: vertical-rl;
  animation: slide 10s linear /*or*//*reverse*/;
}
@keyframes slide  {
  from{transform: translatey(-16.5em);}
  to{transform: translatey(16.5em); }
}
/* On evite certains styles par défaut pour la demo */
.grid > * {
  margin: 0;
}

/* le block conteneur */
.marquee-rtl {
  max-width: 100%;                      /* largeur de la fenêtre */
  overflow: hidden;                     /* masque tout ce qui dépasse */
  height: 100%
}
/* le bloc défilant */
.marquee-rtl.animated > :first-child {  /* on ajoute la classe .animated */
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 0em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation-name: defilement-rtl;       /* référence à la règle @keyframes mise en oeuvre */
  animation-duration: 15s;              /* valeur à ajuster suivant la longueur du message */
  animation-timing-function: linear;    /* pas vraiment utile ici */
  font-size:18vw;

}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

/* ---------------- */
/* défilement vertical */
.marque-ver {
  position:relative;
  max-width: 100%;
  height:20%;
  overflow: hidden;
  font-size:18vw;

}
.marque-ver > div {
  position:relative;
  padding: 20%; /* meme que height du parent */
  animation: defilement-ver 5s linear;
  cursor: pointer;
}

@keyframes defilement-ver {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-100%,0);
  }
}

Est-ce possible ?
Merci à vous pour votre aide,
ED
Modifié par el_debutanti (23 Jun 2022 - 14:54)
Salut allan00958,
ça a l'air super mais je n'y connais rien en JS Smiley hum
Je pensais plutôt à une solution CSS. Mais je vais mater les videos/tuto en français sur gsap car ton lien est en anglais, et mon anglais... un peu comme le JS Smiley cligne
Merci !
Je pense que c'est wow.js qui fait que le texte horizontal reste statique :
  <script src="js/dist/wow.js"></script>
  <script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
  </script>

Non ?
Sujet clos
Aller à