{"id":383144,"date":"2026-10-10T14:37:49","date_gmt":"2026-10-10T14:37:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/jyp-images-effects\/"},"modified":"2026-10-10T14:37:23","modified_gmt":"2026-10-10T14:37:23","slug":"jyp-images-effects","status":"publish","type":"plugin","link":"https:\/\/nb.wordpress.org\/plugins\/jyp-images-effects\/","author":23570723,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"0.5.20","stable_tag":"0.5.20","tested":"7.1.3","requires":"6.5","requires_php":"7.4","requires_plugins":null,"header_name":"JYP Images Effects","header_author":"JYP","header_description":"Create layered images and text with a configurable 3D parallax effect in Elementor.","assets_banners_color":"","last_updated":"2026-10-10 14:37:23","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/jyp-plugins.tech\/donate\/","header_plugin_uri":"https:\/\/jyp-plugins.tech\/jyp-images-effects\/","header_author_uri":"https:\/\/jyp-plugins.tech\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":27,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq"],"tags":{"0.5.20":{"tag":"0.5.20","author":"jypdevelopment","date":"2026-10-10 14:37:23","revision":3738167}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3738178,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3738178,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.5.20"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[785,76538,133,10084,2693],"plugin_category":[50],"plugin_contributors":[283508],"plugin_business_model":[],"class_list":["post-383144","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-elementor","plugin_tags-image","plugin_tags-layers","plugin_tags-parallax","plugin_category-media","plugin_contributors-jypdevelopment","plugin_committers-jypdevelopment"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/jyp-images-effects\/assets\/icon-128x128.png?rev=3738178","icon_2x":"https:\/\/ps.w.org\/jyp-images-effects\/assets\/icon-256x256.png?rev=3738178","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<p><strong>Developer:<\/strong> <a href=\"https:\/\/jyp-plugins.tech\/\">JYP - Just Your Plugin<\/a><\/p>\n\n<p><strong>Plugin information:<\/strong> <a href=\"https:\/\/jyp-plugins.tech\/jyp-images-effects\/\">JYP Images Effects<\/a><\/p>\n\n<p>JYP Images Effects is completely free to use, and all of its features will remain free.<\/p>\n\n<p>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.<\/p>\n\n<p>Features:<\/p>\n\n<ul>\n<li>Add multiple image and text layers to a single widget.<\/li>\n<li>Adjust layer depth, movement strength, image scale, alignment, typography, borders, shadows, and other styling options.<\/li>\n<li>Configure the parallax intensity, maximum tilt, perspective, and whether the effect responds only while the pointer is over the widget.<\/li>\n<li>Configure reduced-motion intensity and respect the visitor's reduced-motion preference.<\/li>\n<li>Uses Elementor's existing image widget as its base and requires Elementor to be installed and active.<\/li>\n<\/ul>\n\n<h3>Usage Examples<\/h3>\n\n<h4>Example 1: Parallax with image layers<\/h4>\n\n<ol>\n<li>In Elementor, add the <strong>JYP Images Effects<\/strong> widget to your page.<\/li>\n<li>In the <strong>Layers<\/strong> section, edit the first layer and choose an image for the background or base.<\/li>\n<li>Add more layers with the repeater's <strong>Add Item<\/strong> button. Choose an image for each layer and arrange them from the background to the foreground.<\/li>\n<li>For each layer, adjust <strong>Depth<\/strong>, <strong>Movement strength<\/strong>, and <strong>Scale<\/strong>. Use transparent PNG or WebP images for foreground objects when you want lower layers to show through.<\/li>\n<li>In the <strong>Effects<\/strong> section, set <strong>Effect<\/strong> to <strong>Parallax<\/strong>, then adjust intensity, maximum tilt, perspective, and <strong>In widget area<\/strong> as needed.<\/li>\n<li>Preview the page and move the pointer to see the image layers shift at different depths.<\/li>\n<\/ol>\n\n<h4>Example 2: Parallax with image and text layers<\/h4>\n\n<ol>\n<li>Add the <strong>JYP Images Effects<\/strong> widget in Elementor and set an image as the first, background layer.<\/li>\n<li>Add another item in <strong>Layers<\/strong>. Set <strong>Content type<\/strong> to <strong>Image<\/strong> and choose an image for a foreground layer. Add other image layers if needed.<\/li>\n<li>Add another item and set <strong>Content type<\/strong> to <strong>Text<\/strong>. Enter the text in the <strong>Text<\/strong> editor.<\/li>\n<li>Arrange the text layer in the stack, then adjust its <strong>Depth<\/strong> and <strong>Movement strength<\/strong>. Use the horizontal and vertical position controls to place the text over the image.<\/li>\n<li>Style the text with the typography, text color, background, border, shadow, and padding controls.<\/li>\n<li>In <strong>Effects<\/strong>, choose <strong>Parallax<\/strong> and adjust the effect settings. Preview the page and move the pointer to see the image and text layers move at different depths.<\/li>\n<\/ol>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate Elementor.<\/li>\n<li>Upload the <code>jyp-images-effects<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress Plugins screen.<\/li>\n<li>Activate the JYP Images Effects plugin through the Plugins screen.<\/li>\n<li>In Elementor, add the <strong>JYP Images Effects<\/strong> widget to your page.<\/li>\n<li>Add image or text layers and configure the effect and styling options.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20work%20without%20elementor%3F\"><h3>Does this plugin work without Elementor?<\/h3><\/dt>\n<dd><p>No. Elementor must be installed and active. Support for using the effect with a shortcode is planned for a future version.<\/p><\/dd>\n<dt id=\"how%20do%20i%20enable%20parallax%3F\"><h3>How do I enable parallax?<\/h3><\/dt>\n<dd><p>Open the widget's <strong>Effects<\/strong> section, choose <strong>Parallax<\/strong>, then configure the intensity and other available settings.<\/p><\/dd>\n<dt id=\"does%20the%20effect%20respect%20reduced-motion%20preferences%3F\"><h3>Does the effect respect reduced-motion preferences?<\/h3><\/dt>\n<dd><p>Yes. The widget uses the configured reduced-motion intensity when the visitor's device requests reduced motion.<\/p><\/dd>\n\n<\/dl>","raw_excerpt":"Create layered image and text compositions with a configurable 3D parallax effect in Elementor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/383144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=383144"}],"author":[{"embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jypdevelopment"}],"wp:attachment":[{"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=383144"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=383144"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=383144"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=383144"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=383144"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/nb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=383144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}