A Creative Way to Highlight a Powerful Image on Your Website

Sometimes it is best not to over think things. And if you are lucky enough to stumble upon an image that can be used to replace the clutter and noise of 50 words – don’t over complicate it.

So when Catclar Investments asked us to develop a new website for an urban housing project they will be building near the Bell Road corridor in north Scottsdale – the interior rendering they provided was so stunning we knew we needed to keep things simple and let the image speak for itself.

Our solution was to use a parllax scrolling effect that centered the whole web design around the interior and exterior renderings.


Screen shot of new website created for Soho Scottsdale
Parallax Scrolling Effect Used on New Web Development for Scottsdale, Arizona Home Builder

Visit Website

What is Parallax Scrolling?

Parallax scrolling is a web browser scrolling technique where the background image on the page moves slower than the html words or other images that hover over it. The end result is an illusion of depth to the page and a really nice (yet subtle) way to highlight a powerful image.


The project, called Soho Scottsdale, officially launched this month and the client loved how the visual effects turned out. We later enhanced it further by putting in some nice messaging that fades in and out on the main banner for them.

One Lesson Learned

To create the parallax scrolling effect we used a jquery add-on called Stellar.js.  The library effect was great however it did display some slight bumpiness and a jerky effect in Internet Explorer 11 if the site visitor scrolled too quickly down the page.

If you stumble across similar issues, make sure the background image CSS is set to fixed position and if you are using additional images along with the parallax effect check that the stellar.js speed ratios are not the same.

Related Resources