QParallax

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 takes care of a lot of quirks, including image/video size which can actually be smaller than the window width/height.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QParallax'
    ]
  }
}

Usage

Image background



WARNING

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.

WARNING

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 avaialable until the video’s metadata has been loaded.

Custom height with video background



Custom speed



Scoped Slot



QParallax API