web_parallax_scene Shortcode
The web_parallax_scene shortcode creates the pointer-responsive stage for image, text and custom-HTML parallax layers. The renderer generates a unique frontend ID and constrains overflowing layer movement to the scene.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed child shortcodes: web_parallax_layer, web_parallax_layer_text, web_parallax_layer_html.
Usage
[web_parallax_scene]
Content
[/web_parallax_scene]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_class |
— | Space-separated CSS class names | Adds classes to the scene wrapper. |
Enclosed content
Add only the three supported layer types through the builder. Each child supplies its own X and Y depth; the scene supplies the shared relative-input, hover-only and pointer-event behavior.
Customize the stylesheet
Go to Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Parallax scene to compare the current parallax-scene.min.css source with an editable version. Saving creates a minified per-site replacement for the existing web-parallax-scene handle. The shortcode, child layers, depth attributes, generated scene ID, conditional loading and web_parallax_scene interaction script remain unchanged. Revert to theme CSS removes the replacement and restores the current theme asset.
Verification
Test movement from several pointer positions and verify foreground and background layers follow the intended depth relationship. Check the static composition on touch and keyboard-only use, where pointer-driven movement is not essential to understanding the content.