在单个部分上垂直滚动 [英] Vertical Scroll on a Single section

问题描述

我要制作一个具有垂直滚动过渡效果的部分，请观看此处的视频以供参考: https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing

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

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

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?

推荐答案

您可以使用纯JS和

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>

这篇关于在单个部分上垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！