Parallax Scrolling on the Momentum Squarespace Template

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.

mx610hack

My Logitech mx610 mouse has some LEDs on the top but I haven’t seen any Linux distro support them. Luckily, I found this source a while back that enables interaction with said LEDs. I just hooked the mouse up to a different PC and went searching to see if there’s an update… no dice. In fact, I couldn’t even find the version I currently had online anywhere. So I’m doing what any good open source contributor would do: host the file.

Here it is! mx610hack-0.3.tar

Disclaimer: I had this working in an old version of Ubuntu but haven’t even tested it with anything more recent yet. It did compile so that’s a start!

I should also mention that I did not write this code. I’m just sharing it because it seems to be hard to find these days. The original source seems to be here: http://blogs.kde.org/node/2029

 

Four Years!

Today is our fourth anniversary. We celebrated this past weekend with a trip to The Domes in Milwaukee, and then dinner at Benvenuto’s. Both were incredible, mostly because of my lovely wife. Tonight, Erika surprised me with a candle lit dinner while the kids were playing in their room. It was incredibly sweet. These have been the best years of my life, and I’m looking forward to many more with my wife.

Bad Behavior has blocked 628 access attempts in the last 7 days.