{"id":304613,"date":"2026-05-11T14:10:31","date_gmt":"2026-05-11T14:10:31","guid":{"rendered":"https:\/\/en-ca.wordpress.org\/plugins\/shift8-scrollshot\/"},"modified":"2026-05-13T13:44:00","modified_gmt":"2026-05-13T13:44:00","slug":"shift8-scrollshot","status":"publish","type":"plugin","link":"https:\/\/ceb.wordpress.org\/plugins\/shift8-scrollshot\/","author":15006456,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.2","stable_tag":"1.0.2","tested":"6.9.4","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Shift8 ScrollShot","header_author":"Shift8 Web","header_description":"Scrolling tall-screenshot viewport effect. Add the class s8-scrollshot to a container and s8-scrollshot__image to an image inside it.","assets_banners_color":"ed145a","last_updated":"2026-05-13 13:44:00","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/shift8web.ca","header_plugin_uri":"","header_author_uri":"https:\/\/shift8web.ca","rating":0,"author_block_rating":0,"active_installs":0,"downloads":91,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"shift8","date":"2026-05-12 21:59:19"},"1.0.2":{"tag":"1.0.2","author":"shift8","date":"2026-05-13 13:44:00"}},"upgrade_notice":{"1.0.2":"<p>Improves frontend data attribute handling.<\/p>","1.0.1":"<p>No action required.<\/p>","1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3530377,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3530377,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3531034,"resolution":"1544x500","location":"assets","locale":"","width":1555,"height":501},"banner-1554x500.png":{"filename":"banner-1554x500.png","revision":3530377,"resolution":"1554x500","location":"assets","locale":"","width":1555,"height":501},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3530377,"resolution":"772x250","location":"assets","locale":"","width":1555,"height":501}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1","1.0.2"],"block_files":[],"assets_screenshots":{"screenshot-1.gif":{"filename":"screenshot-1.gif","revision":3530377,"resolution":"1","location":"assets","locale":"","width":600,"height":359}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[785,4038,790,262577,23139],"plugin_category":[50],"plugin_contributors":[93487],"plugin_business_model":[],"class_list":["post-304613","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-screenshot","plugin_tags-scroll","plugin_tags-scrollshot","plugin_tags-viewport","plugin_category-media","plugin_contributors-shift8","plugin_committers-shift8"],"banners":{"banner":"https:\/\/ps.w.org\/shift8-scrollshot\/assets\/banner-772x250.png?rev=3530377","banner_2x":"https:\/\/ps.w.org\/shift8-scrollshot\/assets\/banner-1544x500.png?rev=3531034","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/shift8-scrollshot\/assets\/icon-128x128.png?rev=3530377","icon_2x":"https:\/\/ps.w.org\/shift8-scrollshot\/assets\/icon-256x256.png?rev=3530377","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/shift8-scrollshot\/assets\/screenshot-1.gif?rev=3530377","caption":""}],"raw_content":"<!--section=description-->\n<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>\n\n<p><strong>Features:<\/strong><\/p>\n\n<ul>\n<li>Automatic loop or scroll-linked movement<\/li>\n<li>Configurable pause timing<\/li>\n<li>Optional browser-style frame with traffic-light dots<\/li>\n<li>Per-instance configuration via data attributes<\/li>\n<li>Multiple independent instances on one page<\/li>\n<li>Respects <code>prefers-reduced-motion<\/code><\/li>\n<li>No jQuery dependency<\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<ol>\n<li>Add a container element and give it the CSS class <code>s8-scrollshot<\/code>.<\/li>\n<li>Add an image inside that container and give the image the CSS class <code>s8-scrollshot__image<\/code>.<\/li>\n<li>(Optional) Add data attributes to the container or image to configure the behavior.<\/li>\n<\/ol>\n\n<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>\n\n<h4>Page Builder Setup<\/h4>\n\n<p>In visual builders such as Bricks or Elementor:<\/p>\n\n<ol>\n<li>Add a container or section element and apply the CSS class <code>s8-scrollshot<\/code>.<\/li>\n<li>Add an image element inside it and apply the CSS class <code>s8-scrollshot__image<\/code>.<\/li>\n<li>Use the builder's custom attributes panel to add any <code>data-*<\/code> attributes.<\/li>\n<\/ol>\n\n<h4>Plain HTML Example<\/h4>\n\n<pre><code>&lt;div class=\"s8-scrollshot\" data-mode=\"auto\" data-duration=\"15000\"&gt;\n  &lt;img class=\"s8-scrollshot__image\" src=\"screenshot.png\" alt=\"Screenshot\"&gt;\n&lt;\/div&gt;&lt;h3&gt;Data Attributes&lt;\/h3&gt;\n<\/code><\/pre>\n\n<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>\n\n<ul>\n<li><code>data-mode<\/code> - <code>auto<\/code> or <code>scroll<\/code> (default: <code>auto<\/code>)<\/li>\n<li><code>data-duration<\/code> - Total cycle time in milliseconds (default: <code>12000<\/code>)<\/li>\n<li><code>data-end-pause<\/code> - Hold time at top and bottom in milliseconds (default: <code>1500<\/code>)<\/li>\n<li><code>data-pause-on-hover<\/code> - <code>true<\/code> or <code>false<\/code> (default: <code>true<\/code>)<\/li>\n<li><code>data-reverse<\/code> - <code>true<\/code> or <code>false<\/code>, controls bounce direction (default: <code>true<\/code>)<\/li>\n<li><code>data-frame<\/code> - <code>none<\/code> or <code>browser<\/code> (default: <code>none<\/code>)<\/li>\n<li><code>data-viewport-height<\/code> - Visible area height in pixels (default: <code>700<\/code>)<\/li>\n<li><code>data-viewport-width<\/code> - Viewport width in pixels, <code>0<\/code> for auto (default: <code>0<\/code>)<\/li>\n<li><code>data-easing<\/code> - Any CSS easing string (default: <code>ease-in-out<\/code>)<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>shift8-scrollshot<\/code> folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate the plugin through the Plugins screen in WordPress.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20require%20a%20specific%20page%20builder%3F\"><h3>Does it require a specific page builder?<\/h3><\/dt>\n<dd><p>No. The plugin scans the DOM for <code>.s8-scrollshot<\/code> and <code>.s8-scrollshot__image<\/code> classes regardless of which theme or page builder rendered them. It works with Bricks, Elementor, Gutenberg blocks, hand-coded HTML, or any other setup.<\/p><\/dd>\n<dt id=\"can%20i%20have%20multiple%20instances%20on%20one%20page%3F\"><h3>Can I have multiple instances on one page?<\/h3><\/dt>\n<dd><p>Yes. Each <code>.s8-scrollshot<\/code> instance is independent.<\/p><\/dd>\n<dt id=\"what%20happens%20if%20my%20image%20is%20shorter%20than%20the%20viewport%3F\"><h3>What happens if my image is shorter than the viewport?<\/h3><\/dt>\n<dd><p>The image stays static.<\/p><\/dd>\n<dt id=\"how%20do%20i%20control%20the%20width%3F\"><h3>How do I control the width?<\/h3><\/dt>\n<dd><p>Set a width on the container element, or use the <code>data-viewport-width<\/code> attribute with a pixel value. The image fills the viewport width by default.<\/p><\/dd>\n<dt id=\"how%20do%20i%20make%20the%20scroll%20slower%3F\"><h3>How do I make the scroll slower?<\/h3><\/dt>\n<dd><p>Increase <code>data-duration<\/code>. For a slow scroll, try <code>15000<\/code> or <code>20000<\/code> (15-20 seconds per cycle). Also increase <code>data-end-pause<\/code> for longer holds at each end.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Harden data attribute parsing and animation setup.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Move runtime CSS and JavaScript to <code>frontend-assets<\/code>.<\/li>\n<li>Add WordPress.org plugin page assets.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Display tall screenshots inside a fixed-height scrolling frame.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/304613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=304613"}],"author":[{"embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/shift8"}],"wp:attachment":[{"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=304613"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=304613"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=304613"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=304613"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=304613"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ceb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=304613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}