While working on my wife’s web page, I ran into a difficult challenge. She asked for a page to include parallax scrolling on a template that does not include parallax scrolling as a feature. In this case, we’re using Momentum. I figured I might have to dive into developer mode to achieve this, but I’ve been running into problems getting that to work, so I thought I’d take a stab at it without developer mode.

Requirements were clear:

• Stationary parallax scrolling (image stays stationary while other elements scroll over it)
• Images must be added/edited in the Squarespace online design tools (no hard-coding images here)
• Height of the “window” must be editable in the Squarespace online design tools as well
• Must be able to embed text over the images

After walking through a few examples online, I figured it shouldn’t be too hard to accomplish with some CSS and jQuery. I added several “poster” and “text” blocks to a page and plugged the following code into the page header. You could put this in code injection if you wanted this effect on every page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
html {
	overflow-x: hidden;
}
.image-inset {	
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
	border: 0px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
}
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img {
	display: none;
}
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
	display: none;
}
</style>

<script>
$(document).ready(function(){
	$('.image-inset').each(function(i,e) {
		$(e).css('background-image', 'url("'+$(e).children('img')[0].src+'")');
	});
});
</script>

To get this to work on other templates, you might need to tweak the CSS a bit, but it should be doable.