html - 创建一个jQuery函数

Question

我想创建一个 JQuery 函数，以使我当前的 CSS 动画仅在用户滚动动画图像时发生。

#pot {
  position: relative;
  -webkit-animation: 3s linear 1s infinite running slidein;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}

@-webkit-keyframes run {
  0% {
    left: 0;
  }
  100% {
    left: 15%;
  }
}

<div class="col-sm-7 col-md-4 col-lg-4">
  <img id="pot" src="https://bibliotheques.csdm.qc.ca/files/2018/11/10_banques_dimages_gratuites_libres_de_droits-300x169.jpg" />
</div>

标签： htmljquerycssanimation

Answer 1

喜欢

$(document).on("scroll",function() {$("#pot").addClass("pot")})

.pot {
  position: relative;
  -webkit-animation: 3s linear 1s infinite running slidein;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}

@-webkit-keyframes run {
  0% {
    left: 0;
  }
  100% {
    left: 15%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-7 col-md-4 col-lg-4">
  <img id="pot" src="https://bibliotheques.csdm.qc.ca/files/2018/11/10_banques_dimages_gratuites_libres_de_droits-300x169.jpg" />
</div>
<div>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
<p>Scroll</p>
</div>