Emiliano Lorenzi

<p>PIBE (Parallax Image Block and Effects) is a flexible and user-friendly Gutenberg block that allows you to add modern, animated images to your pages with ease. Whether you want to add depth with parallax, capture your visitors’ attention with hover transitions, or highlight content with stylish overlays, PIBE makes it simple.</p>
<h3>🌟 Key Features</h3>
<ul>
<li>🎢 <strong>Parallax effect</strong> with adjustable speed and direction  </li>
<li>🔍 <strong>Zoom and focus point controls</strong> for perfect alignment  </li>
<li>📱 <strong>Responsive design</strong> for all devices  </li>
<li>🎨 <strong>Customizable overlays</strong> with color and transparency settings  </li>
<li>🧲 <strong>Scroll animations</strong> (fade, slide, zoom, and more)  </li>
<li>🖱️ <strong>Hover effects</strong> (blur, grayscale, contrast, brightness, etc.)  </li>
<li>🔧 <strong>Overlay content</strong> – add titles, subtitles, or even full blocks  </li>
<li>⚡ Built with performance in mind (requestAnimationFrame-based)</li>
</ul>


PIBE – Parallax Image Block and Effects

A ready to use Gutenberg block that lets you create animated images with parallax, hover effects and scroll animations – no code needed.

Demis Patti

<p>Responsive website background images with a parallax effect and a user friendly interface.<br />
Your theme must support <a href="https://codex.wordpress.org/Custom_Backgrounds" rel="nofollow ugc">Custom Backgrounds</a>, which it most likely does already.</p>
<h3>Features</h3>
<ul>
<li>Background image with a parallax effect</li>
<li>One image for all pages or each page individual or a mix of both, it’s all up to you</li>
<li>Serves the whole frontend</li>
<li>Works vertically and, for fun, horizontally</li>
<li>Various overlays to choose from</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>Your theme must support the core WordPress implementation of the <a href="https://codex.wordpress.org/Custom_Backgrounds" rel="nofollow ugc">Custom Backgrounds</a> theme feature.</li>
<li>In order to use the parallax feature, I decided to set the minimum required image dimensions to 1920px * 1200px, which covers a fullHD screen with a slight vertical parallax movement ( Image height – viewport height, so 1200px – 1080px gives 120px offset to move the image. I hope you get the point here.).</li>
<li>You most likely need to edit some css in order to “uncover” the background image or parts of it respectively. Your theme’s layout should be “boxed”, or an opacity should be added to the page content container for the background image to be seen.</li>
<li>PHP version 8.0 or above.</li>
</ul>


cbParallax

Responsive website background images with a parallax effect and a user friendly interface. Your theme must support Custom Backgrounds, which it most l …

PIBE – Parallax Image Block and Effects vs cbParallax