Bricks – animované sekce, kontejnery a bloky

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?

Animovat vše

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>

S vyloučením sekcí

Je tu i varianta skriptu, kde vyloučíte nonkrétní sekce (protože tam máte jinou animaci). A opět, ideální místo je v Bricks -> Settings/Nastavení -> Custom Code/Kód -> Header scripts.

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

<script>
(function() {
  const BASE_SELECTORS = [
    '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',
  ];

  const EXCLUDED_SELECTORS = [
    '.no-anim',
    '#brxe-vwbfvf *',
    '#hero-section',
  ];

  const excludePart = EXCLUDED_SELECTORS.map(s => `:not(${s})`).join('');
  const finalSelector = BASE_SELECTORS.map(s => `${s}${excludePart}`).join(', ');

  const style = document.createElement('style');
  style.textContent = `
    ${finalSelector} {
      opacity: 0;
      transform: translateY(48px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .anim-visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  `;
  document.head.appendChild(style);

  document.addEventListener('DOMContentLoaded', () => {
    const els = document.querySelectorAll(finalSelector);

    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 });

    els.forEach(el => observer.observe(el));
  });
})();
</script>