Touch/Mouse Actions

Utils

Web API Wrappers

Parallax

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.

Quasar provides an out of the box Vue Component you can use. It takes care of a lot of quirks, including image size which can actually be smaller than the window width/height.

Starting with Quasar v0.17.9+, you can also use videos as background content.

Installation

Edit /quasar.conf.js:

framework: { components: ['QParallax']}

Basic Usage

Specifying image with src property. Notice we are referencing an image from statics folder.

<q-parallaxsrc="statics/mountains.jpg"><!-- The rest of DOM elements get displayed on top of the Parallax image after it's loaded --><h1>Parallax</h1></q-parallax>

Specifying an image through media slot. This way you can have more control on the image and also reference it from assets folder which is handled directly by Webpack.

WarningOn 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.

As you noticed in the examples above, you can display some content on top of the Parallax image/video (in the example above an <h1> tag).