API 浏览器
视差

视差滚动是计算机图形学和网页设计中的一种技术,其中背景图片在摄像头下的移动速度比前景图片慢,从而在 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.

Loading QParallax API...

用法(Usage)

¥Usage

滚动容器

请阅读 此处,了解 Quasar 如何确定要附加滚动事件的容器。

¥Please read here about how Quasar determines the container to attach scrolling events to.

图片背景(Image background)

¥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 标签时,由于此类媒体本身具有调整大小的功能,因此必须提供 widthheight 属性才能使 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 height with video background



自定义速度(Custom speed)

¥Custom speed

Custom speed



使用 slot(Using slot)

¥Using slot

Using the slot