How to add Parallax in Squarespace 7.1 website
Parallax Scrolling is a captivating web design feature where the background image moves at a different speed than the content on top. It creates a visually stunning effect, which gained immense popularity in Squarespace's 7.0 Brine templates. However, when Squarespace transitioned to version 7.1, they bid farewell to this beloved feature.
The absence of Parallax Scrolling in Squarespace 7.1 left users searching for alternatives. In a previous post, we explored various workarounds to simulate the Parallax effect, providing an option for users. But now, exciting news for Squarespace 7.1 users: the Parallax Scrolling feature has made a comeback!
If you're eager to infuse subtle motion into your website banners, Parallax Scrolling is once again at your disposal, bringing an element of beauty and dynamism to your web design.
Utilizing the Integrated Parallax Background Image Feature
Now that the Parallax feature is at your fingertips in Squarespace 7.1, let's go through the steps to incorporate it into your banner images.
Here's how to do it on your Squarespace 7.1 site:
Click on the "EDIT" button for your page.
Navigate to the specific section you want to modify.
Click on the "EDIT" (pencil) icon within that section.
Choose "Background."
Upload the image you want to use.
Click on "Image Effect" below the images you've uploaded.
This will open a menu offering several animations to experiment with. Opt for the fourth option (highlighted in the image below) to achieve the captivating Parallax effect.
You can further fine-tune the Parallax effect by clicking on the Settings icon and adjusting the intensity and angle levels.
While Parallax is a fantastic image effect, keep in mind that Squarespace provides a total of five distinct image effects to select from: Liquid, Film Grain, Parallax, Refracted Circles, and Refracted Lines. Explore each one to determine which best complements your site's aesthetic!
Parallax Scrolling with Custom Code
If you're eager to incorporate the parallax scrolling effect into your Squarespace 7.1 website, even though it's no longer a built-in feature, you can achieve it through some JavaScript wizardry.
Step 1: Ensure you have sections with background images on your site.
Step 2: Add the following code snippet:
Go to your site's Settings.
Navigate to Advanced and select Code Injection.
In the "Footer" section, paste the following code:
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<script>
$('.has-background:not(:has(.sqs-video-background))').each(function() {
var findImage = $(this).find('.section-background img');
var imgUrl = findImage.data('src') + '?format=2500w';
var dimensions = findImage.data('image-dimensions');
var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
$(this).parallax({
bleed: 0,
imageSrc: imgUrl,
naturalWidth: imgWidth,
naturalHeight: imgHeight,
speed: .5,
});
});
document.getElementsByTagName("body")[0].onresize = function() {
setTimeout(function() {
jQuery(window).trigger('resize').trigger('scroll');
}, 100);
};
</script>
<style>.has-background{background-color:transparent!important}.has-background .section-background{bac
This code will bring the parallax effect to your sections with background images. Enjoy the dynamic scrolling experience!
Banner Design:
Here's an alternative method that adds a touch of creativity to your section backgrounds in Squarespace 7.1. This technique doesn't rely on images; instead, it uses animated color effects. It's a unique way to enhance your website's visual appeal!
For your Squarespace 7.1 site:
Click on "EDIT" to access your page.
Navigate to the section you want to customize.
Click on the section's "EDIT" (pencil) icon.
Choose "Background."
Unlike traditional backgrounds, you won't need to upload an image for this method.
Look for the "ART" option among the choices at the top.
Select "ART," and you'll find a range of Art Backgrounds to experiment with.
Clicking on "Art" will reveal additional options to fine-tune your art background.
You'll also discover a button in the top-right corner, leading you to a panel where you can further adjust the art, including colors, motion, sizing, and elements. The possibilities are extensive!
That's all there is to it! Hopefully, these techniques will introduce some captivating animations, art, and effects to elevate the visual experience of your Squarespace 7.1 site. While Parallax Scrolling may be missed, Squarespace compensates by offering exciting new features for you to explore.
