利用fullpage实现简单的全屏视差动效(一)

原创 笑靥 随笔 js相关 55阅读 7 天前 举报

利用fullpage实现简单的全屏视差动效

场景

在做全屏切换的效果时,无论是水平切换还是垂直切回,都希望可以带一些视差效果,fullpage插件在全屏切换的体验效果上还不错,这里就不单独实现全屏切换的效果了,主要探讨下切换过程中的视差怎么实现。
当然,fullpge是提供了视差插件--https://alvarotrigo.com/fullPage/extensions/parallax.html,当然是收费的
这里也是简单还原了一下插件的实现方案,之后也会补充相关的效果。

demo

这里先放demo看下效果

https://codepen.io/tianyuhan/pen/KrpRKv/.

这是一个简单的scroll-cover的效果

实现原理

简单的分析下实现的原理,首先fullpage的全屏切换效果,无疑是将fullpage-wrapper(DOM)向上/下/左/右一次切换视口的宽高。
那么视差效果的实现只是让前后背景切换的速度不一致实现的,这里的实现是让前景的文字随着位置同时移动,而后面的背景图则以相反的方向移动,那么就实现了前后景的视差,得到上述效果。
所以这里需要一个fp-bg的DOM来实现后景的运动效果。
左右切换的原理也是一样的,同时当垂直/水平移动同时存在时的切换效果大家可以试着实现一下。

代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复