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

1. In Elementor, add the JYP Images Effects widget to your page.
2. In the Layers section, edit the first layer and choose an image for the background or base.
3. 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.
4. 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.
5. In the Effects section, set Effect to Parallax, then adjust intensity, maximum tilt, perspective, and In widget area as needed.
6. Preview the page and move the pointer to see the image layers shift at different depths.

Example 2: Parallax with image and text layers

1. Add the JYP Images Effects widget in Elementor and set an image as the first, background layer.
2. Add another item in Layers. Set Content type to Image and choose an image for a foreground layer. Add other image layers if needed.
3. Add another item and set Content type to Text. Enter the text in the Text editor.
4. 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.
5. Style the text with the typography, text color, background, border, shadow, and padding controls.
6. 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.