miguifer

<p><strong>Sleek Scroll Video</strong> lets you create beautiful scroll-driven video playback animations on your WordPress site. As the user scrolls, the video plays forward; scroll back, and the video reverses.</p>
<p>Each Sleek Scroll Video is managed as its own custom post type entry, giving you full control over settings and generating a unique shortcode you can embed anywhere.</p>
<h4>Features</h4>
<ul>
<li><strong>Custom Post Type</strong> — Each Sleek Scroll Video is a separate entry in the admin panel.</li>
<li><strong>Unique Shortcodes</strong> — Every Sleek Scroll Video generates its own shortcode (<code>[sleek-scroll-video id="123"]</code>) for easy embedding.</li>
<li><strong>No external dependencies</strong> — All animation logic is handled by the plugin’s own JavaScript and CSS.</li>
<li><strong>Configurable Settings</strong> — Control scroll height, scrub speed, and scroll start/end points.</li>
<li><strong>Media Library Integration</strong> — Upload or select videos directly from the WordPress media library.</li>
<li><strong>Performance First</strong> — Assets are only loaded on pages where the shortcode is actually used.</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Go to <strong>Sleek Scroll Video <span aria-hidden="true" class="wp-exclude-emoji">→</span> Add New</strong> in your admin panel.</li>
<li>Give it a title and configure the video URL plus animation settings.</li>
<li>
<p>Save/publish the post.</p>
</li>
<li>
<p>Copy the generated shortcode from the sidebar.</p>
</li>
<li>Paste the shortcode into any page, post, or widget.</li>
</ol>


Sleek Scroll Video

Create scroll-driven video animations with your own JavaScript and CSS. Each video is a custom post type with its own shortcode.

shift8

<p>Shift8 ScrollShot turns a tall image into a scrolling screenshot preview. Add the wrapper and image classes, then adjust the behavior with data attributes. It works in regular templates, block markup, and most page builders.</p>
<p><strong>Features:</strong></p>
<ul>
<li>Automatic loop or scroll-linked movement</li>
<li>Configurable pause timing</li>
<li>Optional browser-style frame with traffic-light dots</li>
<li>Per-instance configuration via data attributes</li>
<li>Multiple independent instances on one page</li>
<li>Respects <code>prefers-reduced-motion</code></li>
<li>No jQuery dependency</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Add a container element and give it the CSS class <code>s8-scrollshot</code>.</li>
<li>Add an image inside that container and give the image the CSS class <code>s8-scrollshot__image</code>.</li>
<li>(Optional) Add data attributes to the container or image to configure the behavior.</li>
</ol>
<p>Data attributes can be placed on either the wrapper or the image. If the same attribute appears on both, the wrapper value takes priority.</p>
<h4>Page Builder Setup</h4>
<p>In visual builders such as Bricks or Elementor:</p>
<ol>
<li>Add a container or section element and apply the CSS class <code>s8-scrollshot</code>.</li>
<li>Add an image element inside it and apply the CSS class <code>s8-scrollshot__image</code>.</li>
<li>Use the builder’s custom attributes panel to add any <code>data-*</code> attributes.</li>
</ol>
<h4>Plain HTML Example</h4>
<pre><code><div class="s8-scrollshot" data-mode="auto" data-duration="15000">
  <img class="s8-scrollshot__image" src="screenshot.png" alt="Screenshot">
</div><h3>Data Attributes</h3>
</code></pre>
<p>All configuration is done through HTML data attributes on the <code>.s8-scrollshot</code> container or the <code>.s8-scrollshot__image</code> element. Wrapper values take priority over image values.</p>
<ul>
<li><code>data-mode</code> – <code>auto</code> or <code>scroll</code> (default: <code>auto</code>)</li>
<li><code>data-duration</code> – Total cycle time in milliseconds (default: <code>12000</code>)</li>
<li><code>data-end-pause</code> – Hold time at top and bottom in milliseconds (default: <code>1500</code>)</li>
<li><code>data-pause-on-hover</code> – <code>true</code> or <code>false</code> (default: <code>true</code>)</li>
<li><code>data-reverse</code> – <code>true</code> or <code>false</code>, controls bounce direction (default: <code>true</code>)</li>
<li><code>data-frame</code> – <code>none</code> or <code>browser</code> (default: <code>none</code>)</li>
<li><code>data-viewport-height</code> – Visible area height in pixels (default: <code>700</code>)</li>
<li><code>data-viewport-width</code> – Viewport width in pixels, <code>0</code> for auto (default: <code>0</code>)</li>
<li><code>data-easing</code> – Any CSS easing string (default: <code>ease-in-out</code>)</li>
</ul>


Shift8 ScrollShot

Display tall screenshots inside a fixed-height scrolling frame.

Sleek Scroll Video vs Shift8 ScrollShot