Bricks – animované sekce, kontejnery a bloky

Obsah

Automatické animace? A proč ne?

Animované weby, pokud jsou udělané jemně a s citem, vypadají opravdu hezky. Jenže animovat každý blok po jednom je fakt peklo. Co takhle ale udělat animaci, která sama pozná, když se blok s nějakou CSS třídou objeví na obrazovce a zanimuje ji automaticky?

A právě k tomu slouží tento kód (je dělaný pro Bricks builder, ideální místo je v Bricks -> Settings/Nastavení -> Custom Code/Kód -> Header scripts.

Třídy i parametry si upravte, jak libo.

<style>
main .brxe-slider-nested ,
main .brxe-section > .brxe-container > .brxe-block,
footer .brxe-section > .brxe-container > .brxe-block,
main .brxe-section > .brxe-container > .brxe-container > .brxe-block,
main .brxe-section > .brxe-container > .brxe-block > .brxe-div,
main .brxe-section > .brxe-div {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;
      const siblings = [...entry.target.parentElement.children];
      siblings.forEach((el, i) => {
        setTimeout(() => el.classList.add('anim-visible'), 200 + i * 250);
      });
      observer.unobserve(entry.target);
    });
  }, { threshold: 0.15 });

  document.querySelectorAll(`
main .brxe-slider-nested ,
main .brxe-section > .brxe-container > .brxe-block,
footer .brxe-section > .brxe-container > .brxe-block,
main .brxe-section > .brxe-container > .brxe-container > .brxe-block,
main .brxe-section > .brxe-container > .brxe-block > .brxe-div,
main .brxe-section > .brxe-div 
  `).forEach(el => observer.observe(el));
});
</script>