javascript - Vertical Scroll on a Single section

Question

I've to make a single section with a vertical scroll transition effect please have a look at the video here for reference: https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing

How could I achieve this design using javascript or if possible which widget would help me to design this on a wordpress website using elementor?

Answer 1

You can do it easily using pure JS and the Intersection Observer API - when a specific element scrolls into view, animate horizontally using CSS transition transform and translateX the inner element of the right sticky frame

const expo = function(el, entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting)
      el.style.transform = `translateX(-${100 * entry.target.dataset.expo}%)`;
  });
};

document.querySelectorAll(".expo").forEach(el => {
  const els = el.querySelector(".expo-slides");
  const Obs = new IntersectionObserver(expo.bind(null, els), {threshold: 0.5});
  el.querySelectorAll(".expo-article").forEach(el => Obs.observe(el));
});

/*QuickReset*/*{margin:0;box-sizing: border-box;}

body {font: 14px/1.4 sans-serif;}
header, footer {background: #ddd;padding: 60px 0;}

/* EXPO */

.expo {
  position: relative;
  display: flex;
}

.expo-articles {
  flex: 1;
}

.expo-article {
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 1px #000;
}

.expo-slidesWrapper {
  flex: 1;
  position: sticky;
  top: 0px;
  height: 100vh;
  overflow: hidden;
}

.expo-slides {
  position: relatie;
  display: flex;
  height: inherit;
  flex-flow: row nowrap;
  transition: 0.8s;
}

.expo-slide {
  flex: 0 0 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

<header>
  <h1>HEADER</h1>
</header>

<div class="expo">
  <section class="expo-articles">
    <article data-expo="0" class="expo-article">
      <h1>Article 1</h1>
      <p>Lorem ipsum article 1</p>
    </article>
    <article data-expo="1" class="expo-article">
      <h1>Article 2</h1>
      <p>Lorem ipsum article 2</p>
    </article>
    <article data-expo="2" class="expo-article">
      <h1>Article 3</h1>
      <p>Lorem ipsum article 3</p>
    </article>
  </section>
  <div class="expo-slidesWrapper">
    <div class="expo-slides">
      <div class="expo-slide" style="background: #0bf;">1</div>
      <div class="expo-slide" style="background: #f0b;">2</div>
      <div class="expo-slide" style="background: #bf0;">3</div>
    </div>
  </div>
</div>

<footer>
  <h2>FOOTER</h2>
</footer>