Imitation of scroll effect on images in the book.

Cut images at the bottom and restart on top.

It's not working on all images, so far, i don't figure it out ...

Special thanks : Julien & Fred <3

The code :

icono.html index.css

`
class MyHandler extends Paged.Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); this.chunker = chunker; }

        renderNode(node) {
          if (node.nodeType === 1 && node.tagName === "IMG") {
            // check for already rendered
            let ref = node.dataset.ref;
            let start = this.chunker.pagesArea.querySelectorAll("[data-ref='"+ref+"']");

            let leftover;
            let offset;
            start.forEach((item) => {
              if (item.dataset.leftover) {
                leftover = parseFloat(item.dataset.leftover);
                offset = item.dataset.leftover - item.dataset.totalHeight;
              }
            });

            if (leftover) {
              let wrapper = document.createElement('div');
              wrapper.dataset.ref = ref;
              wrapper.style.background = "url(" + node.src + ") no-repeat";
              wrapper.style.backgroundSize = "100%";
              wrapper.style.backgroundPositionY = offset + "px";
              wrapper.style.overflow = "hidden";

              let height = node.height;

              wrapper.style.height = leftover + "px";
              wrapper.style.width = "100%";

              node.parentNode.insertBefore(wrapper, node);
              node.remove();
            } else {
              let page = node.closest(".pagedjs_area");
              let pageTop = page.getBoundingClientRect().top;
              let pageHeight = page.getBoundingClientRect().height;
              let pageWidth = page.getBoundingClientRect().right;
              let { left, top } = node.getBoundingClientRect();
              let height = node.height;
              let offsetTop = node.offsetTop;

              if (left > pageWidth) {
                let index = Array.prototype.indexOf.call(node.parentNode.children, node);
                let prev;
                let bottom;
                if (index > 0) {
                  prev = node.parentNode.querySelectorAll("img")[0];
                  bottom = prev.getBoundingClientRect().bottom;
                }
                let availableSpace = pageTop + pageHeight - bottom;
                // console.log(node.src, "availableSpace", availableSpace, height);

                if (height <= availableSpace ) {
                  return;
                }

                let wrapper = document.createElement('div');
                wrapper.dataset.ref = ref;
                // console.log(node.src, height, availableSpace, height - availableSpace);
                wrapper.dataset.leftover = height - availableSpace;
                wrapper.dataset.totalHeight = height;
                wrapper.style.background = "url(" + node.src + ") no-repeat";
                wrapper.style.backgroundSize = "100%";
                wrapper.style.overflow = "hidden";
                wrapper.style.height = availableSpace + "px";
                wrapper.style.width = "100%";

                node.parentNode.insertBefore(wrapper, node);

              }
            }



          }
        }

        // layout(wrapper) {
        //   let { height } = wrapper.parentNode.getBoundingClientRect();
        //   let imgs = wrapper.querySelectorAll("img");
        //
        //   imgs.forEach((img) => {
        //     let { top } = img.getBoundingClientRect();
        //     console.log(img.src, top, img.height, height);
        //   })
        // }
    }
    Paged.registerHandlers(MyHandler);`