JYP Images Effects

JYP Images Effects adds an Elementor widget for building layered image and text compositions. This first release includes one visual effect: 3D parallax that responds to pointer movement. More effects are planned for future updates.

Developer: JYP – Just Your Plugin

Plugin information: JYP Images Effects

JYP Images Effects is completely free to use, and all of its features will remain free.

The widget uses parallax by default with 100% intensity, a 30-degree maximum tilt, and a 700 px perspective. The effect responds only while the pointer is inside the widget. Its layers smoothly scale during tilting to keep covering the widget.

Reduced-motion preferences are respected.

Features:

• Add multiple image and text layers to a single widget.

• Adjust layer depth, movement strength, image scale, alignment, typography, borders, shadows, and other styling options.

• Configure the parallax intensity, maximum tilt, perspective, and whether the effect responds only while the pointer is over the widget.

• Configure reduced-motion intensity and respect the visitor’s reduced-motion preference.

• Uses Elementor’s existing image widget as its base and requires Elementor to be installed and active.

Usage Examples

Example 1: Parallax with image layers

• In Elementor, add the JYP Images Effects widget to your page.

• In the Layers section, edit the first layer and choose an image for the background or base.

• Add more layers with the repeater’s Add Item button. Choose an image for each layer and arrange them from the background to the foreground.

• For each layer, adjust Depth, Movement strength, and Scale. Use transparent PNG or WebP images for foreground objects when you want lower layers to show through.

• In the Effects section, set Effect to Parallax, then adjust intensity, maximum tilt, perspective, and In widget area as needed.

• Preview the page and move the pointer to see the image layers shift at different depths.

Example 2: Parallax with image and text layers

• Add the JYP Images Effects widget in Elementor and set an image as the first, background layer.

• Add another item in Layers. Set Content type to Image and choose an image for a foreground layer. Add other image layers if needed.

• Add another item and set Content type to Text. Enter the text in the Text editor.

• Arrange the text layer in the stack, then adjust its Depth and Movement strength. Use the horizontal and vertical position controls to place the text over the image.

• Style the text with the typography, text color, background, border, shadow, and padding controls.

• In Effects, choose Parallax and adjust the effect settings. Preview the page and move the pointer to see the image and text layers move at different depths.