Icon for the plugin showing a stylized scene of a mountain with clouds and trees.

Parallax Panel

A 2D panel widget that simulates a 3D depth effect in user interfaces.

Show/hide animated preview Animated GIF showing a simple cityscape with each layer moving at different speeds.

Download

Get the source code from GitHub ❭

Features

User Guide

In a widget blueprint, create a Parallax Panel widget from the palette.

Screenshot showing Parallax Panel categorized under Panel in the Palette window.

Add child widgets to the panel. Each child widget is a layer.

Screenshot showing a Parallax Panel widget with three different image child widgets in the hierarchy.

Set the Distance of each layer under Slot (Parallax Panel Slot) in the Details panel.

Screenshot showing the Distance property in the details panel for a child widget. The property is marked with a red arrow.

Use the Offset property in the Parallax Panel to control the perspective.

Screenshot showing the Offset property in the details panel for a Parallax Panel widget.

The parallax scrolling equation used in this plugin is \(\text{Transform} = \frac{\text{Offset}}{1+(\frac{\text{Distance}}{100})}\). A layer with a distance of 100 will move twice less than a layer with a distance of zero.

Forest icons created by Freepik - Flaticon