內容簡介
JYP Images Effects 是一款為 Elementor 提供的外掛，讓使用者能夠創建層疊的圖片和文字組合。此外掛的核心價值在於其獨特的 3D 立體視差效果，能隨著滑鼠移動而變化，提升網站的視覺吸引力。
【主要功能】
• 支援多層圖片和文字的添加
• 調整層的深度、移動強度和圖片比例
• 配置視差強度和最大傾斜角度
• 尊重訪客的減少動作偏好
• 基於 Elementor 的現有圖片小工具
外掛標籤
開發者團隊
原文外掛簡介
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.
