javascript - 当元素可见时运行动画 - 自定义 javascript

Question

我正在创建一个几乎没有动画的网站，下面是一段从左到右显示图像的 javascript 和 css

    var i = 0;
    var interval = setInterval(function () {
    $('.mask').width(i + "%");
    i++;
    if (i == 101) {
    clearInterval(interval);
    }
    }, 20);
    

    .mask {
      background:white;
      max-width: 640px;
      z-index:1;
      height: 426px;
      position: relative;
      overflow: hidden;
    }
    
    .img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="mask">
    <div class="img">
    <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
    </div>
    </div>

然后是从右到左显示图像的 javascript。

var i = 0;
    var interval = setInterval(function () {
    $('.mask3').css({ left: -i + "%" });
    i++;
    if (i === 0) {
    clearInterval(interval);
    }
    }, 20);

    .wrapper {
      width: 640px;
      height: 430px;
      position: relative;
    }
    
    .mask3 {
      position: absolute;
      top: 0;
      left: 0;
      background:white;
      width: 100%;
      height: 100%;
      z-index:1;
    }
    
    .img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="wrapper">
      <div class="mask3">
      </div>
      <div class="img">
        <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" />
      </div>
    </div>

现在我试图仅在显示 div 或用户向下滚动到特定 div 时加载此动画，然后动画将回滚。

我尝试了一些脚本，但所有脚本都被引导使用 if else 语句，尽管我无法选择任何有效的脚本，有人可以帮我解决这个问题。

Answer 1

这是一个非常粗略的答案，但如果您愿意，可以这样做。您仍然需要在动画功能上做更多的工作，让它隐藏起来，然后根据您想要的方式显示。

var elem = $('.img'); //use a better identifier like an id.
var counter = 0
elem.hide();

function myAnimation() {
    elem.show();
    var i = 0;
    var interval = setInterval(function () {
    $('.mask').width(i + "%");
    i++;
    if (i == 101) {
    clearInterval(interval);
    }
    }, 20);
    counter++;
}

$(window).scroll(function(){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && counter < 1) {
        myAnimation();
    }
});

计数器基本上是让它动画一次，因为你会在每次滚动时触发这个动画。