在单个部分上垂直滚动

Question

我要做一个带有垂直滚动过渡效果的单节，请看这里的视频以供参考：https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing

我如何使用 javascript 实现这个设计，或者如果可能的话，哪个小部件可以帮助我使用 elementor 在 wordpress 网站上设计这个？

Answer 1

您可以使用纯 JS 和 Intersection Observer API 轻松做到这一点 - 当特定元素滚动到视图中时，使用 CSS transition transform 和 translateX 右侧粘性框架的内部元素水平动画

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>