1. Home
  2. Docs
  3. Advanced Customizations
  4. Thumb animation on page scroll

Thumb animation on page scroll

Please scroll Below to see the animation:

Hybrid 3D FlipbookSpiral BookOpen BookAWS partial loadingSame page link testing

Please scroll up to see the animation:

JavaScript Code:


/** 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;
            var lazyImage = entry.target;

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


Stylesheet CSS:


    border-radius: 8px;
    opacity: 0;
    transform: scale(1.2);

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

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


For WordPress, please read on 
How to add Custom Code to WordPress Pages

Leave a Comment