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.
2 Likes
iaeiou
2
Nice! How did you implement animate on scroll?
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