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.

QParallax API

Loading API...


Scrolling container

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

Image background

Image background

Video background


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.


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

Using slot

Using the slot