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.

Michael

<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/6c2Rdi4o5MU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<a href="https://superblockslider.com/slider-showcase/" rel="nofollow ugc">Slider examples</a></p>
<p>A lightweight image & content slider plugin. Allows for full control over the content layout and design.</p>
<h4>Lightweight</h4>
<p>Standalone 5KB JavaScript file, optimize for loading speed and performance.</p>
<h4>Image slider</h4>
<p>Customize each slide’s background image and customize the visual presentation of your sliders.</p>
<h4>Content slider</h4>
<p>Highly flexible and customizable content, giving you full control over the content layout and design by using any blocks in the content area.</p>
<h4>Supports block & classic editor</h4>
<p>Works for block editor and classic editor(via shortcode. example: [superblockslider id=”123″]).</p>
<h4>Gradient / color overlay</h4>
<p>Enhance the visual impact of your sliders by applying gradient or solid color overlays, creating an eye-catching backdrop for your content.</p>
<h4>Responsive slider</h4>
<p>Set different background images for desktop, tablet, and mobile screen sizes, allowing for optimal visual presentation across various devices.</p>
<h4>Live Editor Preview</h4>
<p>Preview your slider’s appearance in real-time within the WordPress editor, making it easy to fine-tune and perfect the design before publishing.</p>
<h4>Touch & mouse drag</h4>
<p>Supporting both touch and mouse swipe gestures, providing a seamless user experience on touchscreen devices and desktops.</p>
<h4>Title or Dot Icon Navigation</h4>
<p>Customize the navigation with title-based navigation or dot icons, allowing your users to easily navigate through your sliders.</p>
<h4>Parallax Effect</h4>
<p>Add a visually appealing parallax effect to your slider, this effect creates a captivating scrolling experience by moving the background at a different speed than the foreground content.</p>
<h4>Adaptive slider height</h4>
<p>The slider’s height adjusts automatically based on the background size, ensuring that your slides are displayed properly.</p>
<h4>Transition Animations</h4>
<p>Choose from 20 transition animations to add dynamism and flair to your sliders.</p>
<h3>Featured highlight</h3>
<ul>
<li><a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">Slide</a>, <a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">fade</a> effect</li>
<li><a href="https://superblockslider.com/slider-showcase/#adaptive-height" rel="nofollow ugc">Adaptive slider height</a></li>
<li>Set multiple background image for responsive screen size</li>
<li><a href="https://superblockslider.com/slider-showcase/#demo" rel="nofollow ugc">Title-based</a> navigation or <a href="https://superblockslider.com/slider-showcase/#transition-efect" rel="nofollow ugc">dot icons</a></li>
<li><a href="https://superblockslider.com/slider-showcase/#demo" rel="nofollow ugc">Parallax background effect</a></li>
<li>20 slide <a href="https://superblockslider.com/slider-showcase/#transition-animations" rel="nofollow ugc">transition animations</a></li>
<li><a href="https://superblockslider.com/slider-showcase/#overlay" rel="nofollow ugc">Gradient or solid color overlay</a></li>
</ul>
<h4>Links</h4>
<p><a href="https://superblockslider.com/slider-showcase/" rel="nofollow ugc">Slider examples</a><br />
<a href="https://superblockslider.com/documentations/" rel="nofollow ugc">Documentations</a></p>


Super block slider – Image & content slider

Lightweight image & content slider for block and classic editor.

PIBE – Parallax Image Block and Effects vs Super block slider – Image & content slider