视差滚动是计算机图形学和网页设计中的一种技术,其中背景图片在摄像头下的移动速度比前景图片慢,从而在 2D 场景中营造出深度感,增强沉浸感。
¥Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.
QParallax 处理了很多奇怪的问题,包括图片/视频尺寸实际上可能小于窗口宽度/高度。
¥QParallax takes care of a lot of quirks, including image/video size which can actually be smaller than the window width/height.
用法(Usage)
¥Usage
滚动容器
请阅读 此处,了解 Quasar 如何确定要附加滚动事件的容器。
¥Please read here about how Quasar determines the container to attach scrolling events to.
图片背景(Image background)
¥Image background
视频背景(Video background)
¥Video background
警告
在某些 iOS 平台上,原生 <video>
标签的自动播放功能可能会出现问题。参考。QParallax 和 Quasar 不会以任何方式干扰客户端浏览器对 <video>
标签的功能/限制。
¥On some iOS platforms there may be problems regarding the autoplay feature of the native <video>
tag. Reference. QParallax and Quasar are not interfering in any way with the client browser’s ability/restrictions on the <video>
tag.
警告
在 QParallax 中使用 video
标签时,由于此类媒体本身具有调整大小的功能,因此必须提供 width
和 height
属性才能使 QParallax 正常工作。另外,请注意,在视频元数据加载完成之前,实际的视频宽度和高度不可用。
¥When using the video
tag inside QParallax, you must provide the width
and height
attributes in order for QParallax to work properly because of the intrinsic resizing capabilities of this type of media. Also, be aware that the actual video width and height are not available until the video’s metadata has been loaded.
自定义速度(Custom speed)
¥Custom speed
使用 slot(Using slot)
¥Using slot