JavaScript 监听页面滚动到元素位置执行 css 动画

🍎使用 css 定义动画

  .wyky {
    width: 100% !important;
  }
  .img-animation{
    animation: forwards 1s img-action;
  }
  @keyframes img-action{
    0%{
      margin-left: 0;
    }
    100%{
      margin-left: 165px;
    }
  }

🍌被监听的 HTML 元素

<div>
  <img class="img" src="b.png">
</div>

🍊使用JavaScript监听页面滚动目标元素，添加css动画

  var box = document.querySelector(".wyky");
  var piyao = document.querySelector(".img")
  window.onscroll = function() {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(top);
    if(top > (box.offsetTop - box.offsetHeight)) {
      piyao.setAttribute("class","img-animation" );
    }
  }

▶ 完美执行。

☕我们可以用 wow.js 和 animate.css 动画库来实现需要的动画效果。简单的效果就自己手写一个吧！