Activate animation when in viewport

Question

I am trying to use animate to make images transition from zero opacity to full opacity. The keyframes animation code i have used works but i want to delay the start until the image is in view. I have tried several JS codes which have not worked.

HTML

<div class="item2">
 <img src="images/winston-chen-qg8TGmBNdeY-unsplash.jpg" width="950" height="700" alt="wintson cheng unsplash" class="img">                     
</div>

CSS

@keyframes animate {
 from {opacity: 0;}
 to {opacity: 1;}
}

.img {
 width: 100vw;
 height: auto;
 animation-name: animate;
 animation-duration: 10s;
 animation-timing-function: ease-in;
}

Answer 1

You could do it easily with jQuery.

CSS:

img { opacity: 0; } /* this sets the opacity before it comes in so there isn't a jump */

.img {
     width: 100vw;
     height: auto;
}

.fadein {
     animation: animate 10s forwards;
}

jQuery:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Then in scripts file:

    $(function() {
      $(window).scroll(function() {
        var $img = $(".img");
        $img.each(function() {
            var $y = $(document).scrollTop(),
            $wh = $(window).height(),
            $t = $(this).offset().top - $wh;
            if ($y > $t) {
                $(this).addClass("fadein");
            }
        });
    });
});

Every time the.img tag comes into view it adds the fadein class and fades in.