28172 sujets

CSS et mise en forme, CSS3

Animate lors de l'affichage d'une section d'une longue page html

Salut,

J'utilise la bibliothèque d'animation animate.css
Seulement je voudrais que l'animation ne se déclenche que lorsque l'affichage de la page html est bien arrivée à la bonne hauteur du viewport (c'est comme ça qu'on dit ?) et pas dès le chargement de la page.

Merci de votre aide.
Bonjour,

Sans un aperçu de ton code on ne pourra pas t'aider.
D'autant que je ne connais pas le contenu de animate.css et ne connais pas cette bibliothèque.

Merci Smiley cligne
Ah, oui, le code !

<img alt="blabla" class="animated bounceIn" src="/monimage.jpg" style="margin-left: 25px; display: block;" width="705" height="476">


Le css est inclus dans cette bibliothèque : https://daneden.github.io/animate.css/
Ça fait quelques effets rapidement, mais ils s'appliquent au chargement du code. Moi je voudrais que si la page est longue, l'effet ne s'applique que lorsque le visiteur est descendu jusqu'à ce point là.

Je crois que tout le code css est :

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}


J'espère que tu as assez d'éléments avec ça.

Bonne journée Smiley cligne
Ok, je me suis penché sur ton problème.

Je n'ai pas encore la solution, mais il semblerait que l'on puisse mettre en pause et redémarrer une animation par le biai de la propriété css
animation-play-state: paused;
animation-play-state: running;


Il faudrait faire une fonction javascript qui vérifie le pourcentage de scroll de ta page, et qui active l'animation à partir d'un certain seuil.

Mais là je sèche un peu.
Faudrait que je passe plus de temps pour trouver un truc qui fonctionne.
Sujet clos
Aller à