我必须制作一个具有垂直滚动过渡效果的部分，请观看此处的视频以供参考：https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing https://drive.google.com/file/d/1Fy4BDqc0-LDrPnEVYuQZdiJ0Pk9qDXA5/view?usp=sharing
我如何使用 javascript 实现此设计，或者如果可能的话哪个小部件可以帮助我使用 elementor 在 WordPress 网站上设计此设计？
你可以使用纯 JS 轻松完成路口观察器 API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API- 当特定元素滚动到视图中时，使用 CSS 水平制作动画transition transform and 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
