Emiliano Lorenzi

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.
<h3>🌟 Key Features</h3>
<ul>
<li>🎢 Parallax effect with adjustable speed and direction </li>
<li>🔍 Zoom and focus point controls for perfect alignment </li>
<li>📱 Responsive design for all devices </li>
<li>🎨 Customizable overlays with color and transparency settings </li>
<li>🧲 Scroll animations (fade, slide, zoom, and more) </li>
<li>🖱️ Hover effects (blur, grayscale, contrast, brightness, etc.) </li>
<li>🔧 Overlay content – 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.

snagysandor

Parallax Scrolling Effect by Enllax.js
An ultra-lightweight and super easy to use plugin for applying parallax scrolling effect to any scrolling element. You can set parallax scrolling effects to background elements, and also in both directions (vertically or horizontally)
<a href="https://nagysandor.org/enllax-js-demo" rel="nofollow ugc">Demo</a>
Shortcode example
With external image: 
[enllax xclass=”enllax” offset=”0″ direction=”horizontal” speed=”0.8″ img=”image url”] 
Your content. 
[enllaxend]
With internal image (featured image and content): 
[enllax_post postid=”1″ xclass=”enllax” offset=”0″ direction=”horizontal” speed=”0.8″]
xclass: CSS class name (default: enllax) 
offset: background offset in pixel (default: 0) 
direction: vertical (default) or horizontal 
speed: to allow background image to move with different speed, just use a data attribute with a numeric value as a multiplier for scrolling speed, less is slower and 1 is normal (default value: 0.5) 
img: Parallax background image url

PIBE – Parallax Image Block and Effects vs Parallax Scrolling Enllax.js