使用滚动按钮创建视差效果

Posted

技术标签:

【中文标题】使用滚动按钮创建视差效果【英文标题】:Create a Parallax effect using scroll as a button 【发布时间】:2021-09-15 21:00:42 【问题描述】:

以下网站的名称是什么或如何使滚动效果(发生滚动时页面将用户引导至页面的另一部分而不显示滚动条):

Website

如果可能的话,如何使用纯 css/js 或 React 来做到这一点?

【问题讨论】:

我发现这些效果非常烦人。 1.3 Mb 的页面可能包含 1kb 的实际内容,您肯定可以做得更好吗? :-) 重量不是因为 js,你也可以做漂亮的事情:alvarotrigo.com/fullPage/#page3 【参考方案1】:

看起来他们正在使用全页或全屏滚动效果。

这是他们用来执行此操作的包的 github 链接: https://github.com/alvarotrigo/fullPage.js/

【讨论】:

这正是我想要的,我很感激!

以上是关于使用滚动按钮创建视差效果的主要内容,如果未能解决你的问题,请参考以下文章

如何居中对齐/居中视差滚动内容?

html 在Rainmaker站点上滚动视差部分的解决方法。允许创建点击进入“继续阅读”按钮。

使用 CSS 使用视差效果滚动

为啥不先移动鼠标就无法滚动视差?

平滑滚动和滚动的视差效果

基于Vue实现商城详情页“视差滚动”效果