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

Question

I am creating a website with few animation, below is the piece of javascript and css which is revealing image from left to right

  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> 

and then an javascript which reveals image from right to left.

 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> 

Now I am trying to load this animation only when div is being displayed, or user scroll down to specific div, and then the animation shall roll back.

I tried few of the scripts, but all of them guided to use if else statement although I am not able to pick anything which is working, can someone please help me out on this one.

Answer 1

This is a very rough answer, but you can do this if you want. You will still need to work on your animation function more to make it hide and then display based on how you want it to be.

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();
    }
});

The counter is basically to animate it once, because you will trigger this animation on every scroll.