Customization: Thumb animation on page scroll

Please scroll Below to see the animation:

Links issue
Booklet Mode
CSS Book
Image Flipbook
Open Book

Please scroll up to see the animation:

    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;

/** First we get all the non-loaded image elements **/
var lazyImages = []"._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 =;
            var lazyImage =;
/** Now observe all the non-loaded images using the observer we have setup above **/
lazyImages.forEach(function(lazyImage) {

Leave a Comment