首先,我们来看一下什么叫 视差滚动 。视差滚动就是 让多层背景以不同的速度进行移动而形成的效果 。可能这句话不是很好理解,我们可以查看 这点网址 来直观的感受一下。
当我们慢慢滚动页面的时候,会发现 产品主图 和 产品详情 滚动的速度不一致, 产品详情 以正常的速度进行滚动,但是 产品主图 要比 产品详情 滚动慢一倍,所以形成了 视差效果 。你也可以参照下面我给你贴出来的图:
可能从图上,不能直观的感受出来,建议您还是点看上面的网址,直观的感受一下。
视察滚动:让多层背景以不同的速度去进行移动 1、至少需要拥有两层背景(缓慢移动区、正常移动区) 2、将背景设置为相对布局(为缓慢移动设置 top 来缓冲掉 scroll 滚动) 3、监听 Parallax 组件的滑动,根据滑动来计算 缓慢移动区 top 的值。 说白了,就是对 缓慢移动区 通过使用相对布局 relative & top 来弥补正常滚动产生的距离。话不多说,咱们码上见真情。
考虑到可能要有多处使用到这个效果,所以,我们将其封装成组件,通过vue插槽的方式,来实现组件的复用。当然,这里我们默认,您对vue有比较好的掌握。
模版中,我们使用了两个 slot ,分别接受 缓慢移动区 和 正常移动区 的内容,同时监听了 .parallax 的 scroll 事件,用于判定 缓慢移动区 距离顶部的距离。接着为 .parallax-slow 绑定了属性 :style="{top: slowTop}" , 确定滚动发生后,其距离顶部的距离。
这里一定要注意 .parallax 一定要添加 position: absolute; 或者 position: fixed; ,否则,它的 scroll 事件不生效。具体的原因,你可以查看一写css相关的内容,此处不在多叙。 另外就是 缓慢移动区 和 正常移动区 要设置 position:relative ,这个很重要。
这个组件的行为主要是就是要计算 缓慢移动区 距离顶部的距离 top ,所有的工作都是围绕着这个逻辑进行实现的。
我们在视图组件(Home)中使用 视差组件 。
到此,我们的效果就可以实现了,那么为什么要使用这中效果呢?我个人觉效果是一方面,另一方面还是为了突出页面中的 重点元素 ,比如商品详情页面中, 产品主图 肯定是我们的重点元素,所以让他滑动的慢一些可以增强用户体验。为了照顾有些不喜欢阅读文章的同学,我将 Parallax 组件的内容贴出来。
最后,感谢您的阅读,祝您学习进步。