How To Show A Scrolling Full Page Screenshot In Squarespace
Marksmen Studio's website for Alison Murphey, LMFT. Hover over the image to scroll.
The Best Screenshot Is A Scrolling Screenshot
Sometimes a simple screenshot won't do. You may have used one of many tools like this screen capture extension from Nimbus to make a screenshot of an entire web page, and you want to display it attractively. But these images, depending on how long the web page is, will have very unequal dimensions: normal width, long to very long height. So if you just put it up as an ordinary image in a typical container in Squarespace, your users will have to expand the image to be able to see the page in any detail.
But using some clever code by Nirajan Basnet on Codepen, we can present the whole scrolling web page on hover in a standard container. It can make an impressively classy presentation. We used it here for our portfolio presentation of Marksmen Studio's website for psychotherapist Alison Murphey.
You'll need to use a code or markdown block. You'll also need to add the CSS, either site-wide or page specific under Advanced when you press the page's gear symbol. If you are putting it in per-page code injection you'll need the style tags, otherwise not.
Add The CSS
Here is the CSS wrapped in style tags, modified slightly from the pen:
<style>
.item-preview-wrap {
position: relative;
background: #333;
border-radius: 15px;
}
.item-wrap {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
max-width: 1200px;
}
.is-tile .item-preview {
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
background-color: #e4e9f2;
background-size: cover;
background-position: center 0;
height: 0;
padding-top: 100%;
border-radius: 15px;
}
.is-tile .item-preview:hover {
background-position: center 100%;
-webkit-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.is-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
}
.item-preview {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: block;
position: relative;
overflow: hidden;
}
.is-grid .item {
width: 100%;
display: inline-block;
padding: 20px;
text-align: center;
}
</style>
Upload Your Image
To use a specific image, you'll need to take a screenshot with one of the many tools available, then upload it to Squarespace.
Either use the steps shown in Squrespace's guide to CSS or just type some text, highlight it, click on the link symbol in Squarespace's text editor, then choose File and drag and drop your image into the window. Then click on the file name in the list of uploaded files and you will have copied the image address for your image.
Add Your Code Block
Paste it in the code block in place of the image address for the Alison Murphey website, below:
<div class="is-grid is-tile">
<div class="item-wrap">
<div class="item">
<div class="item-preview-wrap">
<a href="https://www.alisonmurpheylmft.com" target="_blank" class="item-preview" style="background-image:url(https://static1.squarespace.com/static/566c606969492e9db2ae8c4c/t/5a86fec20d929736e64fa982/1518796483675/Alison+Murphey+Website+Full+View.jpg)"></a>
</div>
</div>
</div>
</div>
You'll want to replace everything within these parentheses: background-image:url(), as well as the link of course.
Wow, Look At That Scroll
And that's it. Without venturing too far into animation, you'll generate some movement your site. Note that you may want to put some text underneath to indicate your users should try hovering, because it may not be obvious.
Want To See More Squarespace Hacks?
Check out custom CSS tricks and other code hacks that will help you design a better Squarespace website.