Dykarootka.store — with search and cart

Showcases
1

Dykarootka.store micro site for my wife.

  • Custom theme based on Ananke.
  • Search – fuse.js.
  • Micro backend on Node + MongoDB for order functionality.
  • Custom image processor for high-quality Avif content.
  • Hosting — DigitalOcean.
  • PageSpeed rank around 100.

i4_1500x1000__e04e9089ff
i4_1500x1000__e04e9089ff1500×1000 105 KB

2 Likes
2

Nice! How did you implement animate on scroll?

3 
const fancy_images = function () {
    if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
        const targets  = document.querySelectorAll('.anima');
        const options  = { root: null, rootMargin: "0px", threshold: 0 };
        const observer = new IntersectionObserver(function (entries) {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    addClass(entry.target, 'animation_stop');
                    observer.unobserve(entry.target);
                }
            });
        }, options);

        targets.forEach((target) => {
            if (!isInViewport(target)) { 
                const animation_class = target.dataset.animationClass;
                addClass(target, animation_class);
                observer.observe(target);
            }
        });
    }
};

dr_on_document_load(fancy_images);

And animationClass must be defined in CSS as usual css animation.

1 Like