Okamoto Hidetaka

<p>This plugin is very simple.Exchang viewport by using jQuery & jQuery Cookies.</p>
<p>IF you installed, your responsive website can show PC view in mobile devices.</p>
<p>Thanks for</p>
<p>Using BlackFlag’s jQuery.<br />
URI:<a href="http://black-flag.net/jquery/20140408-5086.html" rel="nofollow ugc">http://black-flag.net/jquery/20140408-5086.html</a></p>
<h3>Arbitrary section</h3>


Viewport Exchanger

There is plugin switching the viewport  of PC view and Mobile view.

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.

Viewport Exchanger vs Shift8 ScrollShot