web-dev-qa-db-fra.com

Déclencher des animations CSS en JavaScript

Je ne sais pas comment utiliser JQuery, j'ai donc besoin d'une méthode qui pourrait déclencher une animation en utilisant uniquement JavaScript.

Je dois appeler/déclencher une animation CSS lorsque l'utilisateur fait défiler la page.

function start() {
  document.getElementById('logo').style.animation = "anim 2s 2s forward";
  document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
* {
  margin: 0px;
}

#logo {
  position: fixed;
  top: 200px;
  height: 200px;
  width: 1000px;
  left: 5%;
  z-index: 4;
  opacity: 0.8;
}

#earthlogo {
  position: fixed;
  top: 200px;
  height: 120px;
  align-self: center;
  left: 5%;
  margin-left: 870px;
  margin-top: 60px;
  z-index: 4;
  opacity: 0.9;
}

@keyframes anim {
  50% {
    filter: blur(10px);
    transform: rotate(-15deg);
    box-shadow: 0px 0px 10px 3px;
  }
  100% {
    height: 100px;
    width: 500px;
    left: 10px;
    top: 10px;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 1, 0.3);
    opacity: 0.7;
  }
}

@keyframes anim2 {
  50% {
    filter: blur(40px);
    transform: rotate(-15deg);
  }
  100% {
    height: 60px;
    width: 60px;
    left: 10px;
    top: 10px;
    margin-left: 435px;
    margin-top: 30px;
    opacity: 0.8;
  }
}

#backstar {
  position: fixed;
  width: 100%;
  z-index: 1;
}

#earth {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 300px;
}
<img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">
javascripthtmlcsscss-animations
15
Siddharth Kurnal

La méthode la plus simple pour déclencher des animations CSS consiste à ajouter ou supprimer une classe - comment faire cela avec du Javascript pur, vous pouvez lire ici:

Comment ajouter une classe à un élément donné?

Si vous utilisez jQuery (ce qui devrait vraiment être facile à apprendre en utilisation de base), vous le faites simplement avec addClass/removeClass.

Il vous suffit alors de définir une transition vers un élément donné comme ceci:

.el {
width:10px;
transition: all 2s;
}

Et puis changez son état si l'élément a une classe:

.el.addedclass {
width:20px;
}

Remarque: Cet exemple était avec transition. Mais pour les animations c'est pareil: il suffit d'ajouter l'animation sur l'élément qui a une classe dessus.

Question similaire ici: Déclencher une animation d'images clés CSS par défilement

11
Blackbam

Vous pouvez utiliser CSS pour masquer l'image/l'animation et afficher le défilement de l'utilisateur. Cela fonctionnerait comme ceci:

CSS:

div {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;
}

#demo{
    display: none;
}

HTML:

<div id="myDIV"> </div>

<div id="demo">
     <img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>

Votre javascript a juste besoin d'inclure un eventListener pour appeler la fonction qui déclenche l'affichage de votre animation.

JS:

document.getElementById("myDIV").addEventListener("scroll", start);

function start() {
    document.getElementById('demo').style.display='block';
}
2
galtech

Version Vanilla JS

document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");
0
krolovolk