Thumb animation on page scroll

–

–

–

–

–

–

Please scroll Below to see the animation:

–

–

–

–

–

–

–

–

–

–

–

–

Please scroll up to see the animation:

–

–

–

–

–

–

JavaScript Code: #

<script>

/** First we get all the non-loaded image elements **/
var lazyImages = [].slice.call(document.querySelectorAll("._df_thumb"));

/** Then we set up a intersection observer watching over those images and whenever any of those becomes visible on the view then replace the placeholder image with actual one, remove the non-loaded class and then unobserve for that element **/
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
             var lazyImage = entry.target;
            lazyImage.classList.add("_df_thumb-transition");
            //lazyImageObserver.unobserve(lazyImage);
        }else{
            var lazyImage = entry.target;
            lazyImage.classList.remove("_df_thumb-transition");
        }
    });
});

/** Now observe all the non-loaded images using the observer we have setup above **/
lazyImages.forEach(function(lazyImage) {
    lazyImageObserver.observe(lazyImage);
});

</script>

Stylesheet CSS: #

<style>

._df_thumb{
    border-radius: 8px;
    opacity: 0;
    transform: scale(1.2);
}

@media (prefers-reduced-motion: no-preference) {
  ._df_thumb{
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}

._df_thumb-transition {
    opacity: 1;
    transform: none;
}

</style>