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.
Usage
QParallax reacts to scrolling in any container on the page. The auto detected scrolling container (see here about how Quasar determines it) only defines the box the scroll percentage is computed against; use the scroll-target prop when the detection picks the wrong one.
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 speed
Using slot
For perf reasons, use the content slot only if you need the scope that it provides. Otherwise, use the default slot.
Refreshing v2.32+
QParallax settles at mount which container it scrolls along, how large the media is and where it stands. Changes it cannot observe on its own are not picked up: an ancestor changing its overflow, a media swapped without a load event or a scroll-target that appears later. Call the refresh() method on the component (through a template ref) after such a change.
Accessibility v2.25+
The default media image has no alt and there is no prop to set one — when the imagery is meaningful, use the media slot and supply your own attributes. The scroll-driven motion does not respect prefers-reduced-motion, so consider offering a reduced-motion alternative yourself. Also verify that text overlaid on the moving image keeps sufficient contrast throughout the scroll range.