The ParallaxItem allows to create parallax movement effects. More...

Import Statement: import VPlay 2.0
Since: V-Play 2.0.4



Detailed Description

This component allows to create a parallax movement effect on all its children when the parallaxPositionTarget moves. The children will be moved faster / slower than the parallaxPositionTarget (parent by default) according the the parallax ratio.

Parallax Background Example

The following example shows the parallax effect using background images. The levelitem scrolls continuously and the parallax items move with different speed dependent on the ratio.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   Scene {

     // The levelItem will be moved into the right direction to demonstrate the parallax effect.
     Item {
       id: levelItem

       // move the level item with constant speed to demonstrate the parallax effect
       MovementAnimation {
         target: levelItem
         property: "x"
         velocity: 10
         running: true

       // First background image consists of an images moving slower than the level item
       ParallaxItem {
         ratio: Qt.point(0.8, 1.0)

         Image {
           source: "img/background-mountains-sd.png"

       // Second background image consists of 2 different images moving with the same speed as the level item
       ParallaxItem {
         ratio: Qt.point(1.0, 1.0)

         Image {
           x: -width
           source: "img/background-hills-sd.png"

         Image {
           source: "img/background-hills2-sd.png"

       // Third background image consists of 1 image used twice moving faster than the level item
       ParallaxItem {
         ratio: Qt.point(1.3, 1.0)

         Image {
           x: -width
           source: "img/background-lawn-sd.png"

         Image {
           id: grass2
           source: "img/background-lawn-sd.png"

   } // end of Scene

 } // end of GameWindow

This code results in following image:

Also see the Parallax Test for more information about the correct usage of the ParallaxItem and how to use a ParallaxScrollingBackground.

Property Documentation

parallaxPositionTarget : Item

The shift effect will occur relative to the movement of this item. By default, the parent of the ParallaxItem is used.

Note: You only need to set this if the ParallaxItem is not a direct child of the moving item.

ratio : point

The ratio property can be set to specify the movement speed of the ParallaxItem relative to the parallaxPositionTarget. The default value is Qt.point(1.0, 1.0)

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support