Javascript 单节上的垂直滚动

我要制作一个具有垂直滚动过渡效果的单节，请查看此处的视频以供参考：

---

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

您可以使用纯JS轻松实现，并且-当特定元素滚动到视图中时，使用CSS

transition

transform

和

translateX

右侧粘性框架的内部元素水平设置动画

const expo=功能（el，条目）{
entries.forEach（entry=>{
if（输入。isIntersecting）
el.style.transform=`translateX（${100*entry.target.dataset.expo}%）`；
});
};
document.queryselectoral（“.expo”）.forEach（el=>{
常量els=el.querySelector（“.expo幻灯片”）；
const Obs=新的IntersectionObserver（expo.bind（null，els），{阈值：0.5}）；
el.querySelectorAll（“世博会文章”）.forEach（el=>Obs.observe（el））；
});
/*QuickReset*/*{margin:0；框大小：border-box；}
正文{font:14px/1.4无衬线；}
页眉，页脚{背景：#ddd；填充：60px 0；}
/*博览会*/
.世博会{
位置：相对位置；
显示器：flex；
}
.世博会文章{
弹性：1；
}
.世博会文章{
最小高度：100vh；
显示器：flex；
柔性流动：柱；
证明内容：中心；
对齐项目：居中；
框阴影：插入0 1px#000；
}
.expo幻灯片包装器{
弹性：1；
位置：粘性；
顶部：0px；
高度：100vh；
溢出：隐藏；
}
.世博幻灯片{
职位：relatie；
显示器：flex；
身高：继承；
flex-flow：行nowrap；
过渡：0.8s；
}
.世博幻灯片{
弹性：0.100%；
显示器：flex；
柔性流动：柱；
证明内容：中心；
对齐项目：居中；
}

标题
第一条
Lorem ipsum第1条

第二条
Lorem ipsum第2条

第三条
Lorem ipsum第3条

1.
2.
3.
页脚
请阅读，使用纯JS和-当特定元素滚动到视图中时，水平移动右侧
位置的内部：粘性
帧