Skip to page content

视差滚动

视差滚动是计算机图形学和网页设计中的一种技术,背景图像通过摄像机移动的速度比前景图像慢,在二维场景中创建一种深度错觉,并增加沉浸感。

QParallax 解决了很多问题,包括图像/视频的大小实际上可以小于窗口的宽度/高度。

QParallax API

用法

滚动容器

QParallax 会对页面上任意容器的滚动作出反应。自动检测到的滚动容器(关于 Quasar 如何确定它,请阅读这里)仅用于定义计算滚动百分比时所依据的边界框;当自动检测选错容器时,请使用 scroll-target 属性。

图像背景

视频背景

WARNING

在某些 iOS 平台上,原生 <video> 标签的自动播放功能可能存在问题。参考。QParallax 和 Quasar 不会以任何方式干扰客户端浏览器对 <video> 标签的能力/限制。

WARNING

当在 QParallax 中使用 video 标签时,您必须提供 width 和 height 属性,以使 QParallax 正常工作,因为这种媒体具有固有的调整大小功能。另外,请注意,只有在加载视频的元数据后,实际的视频宽度和高度才可用。

自定义速度

使用插槽

出于性能考虑,仅当你需要 content 插槽提供的作用域时才使用它。否则请使用 default 插槽。

刷新
v2.32+

QParallax 在挂载时确定它沿哪个容器滚动、媒体有多大以及它所处的位置。它无法自行观察到的变化不会被感知:祖先元素改变其 overflow、在没有 load 事件的情况下替换媒体,或者稍后才出现的 scroll-target。发生此类变化后,请(通过模板 ref)调用组件上的 refresh() 方法。

无障碍访问
v2.25+

默认的媒体图片没有 alt 且没有属性可以设置——当图像有实际含义时,请使用 media 插槽并提供你自己的属性。滚动驱动的运动效果不尊重 prefers-reduced-motion,所以请考虑自行提供减少动画的替代方案。同时请验证叠加在移动图像上的文本在整个滚动范围内都保持足够的对比度。