Landing Pages can be so boring. But with a few Parallax effects, we create something that is not only quick to build but also visually creates an interactive storytelling experience that will look like a lot more effort has gone into it, than actually has. All with just HTML5, the Site Editor and the Web Basics Plan.

How often have you had a client who just wanted a simple (or otherwise cheap) landing page, and then suddenly it’s turned into a full blown website. How did that conversation go with the customer when you gave them the final invoice?

Enter Parallax Scrolling

With a little clever coding and a little out of the box designing, we can create a cost effective alternative to those cheap and nasty landing pages. The Parallax Effect allows us to be more creative about how we present the content to the customer in an engaging and interactive manner.

We’ve created a demonstration of how you can use the Parallax Scrolling effect within Business Catalyst with sample files and some instructions to create one yourself.

What is this Parallax you speak of?

The Parallax Effect has been around for a very long time, however only recently has it gained popular momentum. Thanks mainly to a handful of easy to use Javascript plugins and especially from Wieden+Kennedy’s Nike’s Better World where a practical and real use example of how this effect could be used was showcased. This spiralled a flurry of blog posts and online conversation making us all re-think a traditional approach to website design.

The Parallax Effect, or mainly in this case Parallax Scrolling, is when the image objects move independently in relation to how the user scrolls through the website. It gives the illusion the customer is controlling the website’s movement and can be quite an engaging experience especially if matched with effective “storyline”.

Layering a Website Sandwich

When creating a Parallax website a “layered” or “sandwich” approach is taken. Very much like writing a story - you’ll use the layers to engage the customer as they move through the site. 

The Beginning

The bottom layers are the “Panels” or “Sections”, which is where the story begins. They house all the objects for each portion of your site. You’ll attach full size images, which set the tone of what each section is about. These can be set to any height and are usually the full width of the users screen. This gives great impact, especially with today’s large screen sizes.

The Middle

The second layer is the content or “articles”, which is the business end of the site. It’s where you’ll set the plot and outline the body of what your site is presenting.

Each article can be laid out however you want, so it gives you great flexibility in controlling the look and feel of your content.

The End

And the third layer is the additional design elements called “Sprites”.

These complement the finale of your story. Sprites are individual objects, such as images or text boxes, which can be positioned anywhere inside the panels and move at varying speeds to drive home your website’s message.

Moving Pictures

The two main components that make up the parallax scrolling effect are the Backgrounds and Sprites. Each can be set to animate independently by modifying the speed at which it moves in relation to how fast the user scrolls through the site.

The moving pictures is where the magic happens and really brings your site to life. Some objects can move fast, some slow and some even in the opposite direction. It’s really up to you to get the feel you want.

Automated Navigational Controls

The demo also automatically sets up all the navigational controls to help assist the customer in navigating through your story. It tells them where they are and where they need to go. All you need to do is set up the Panels and create the navigation.

Business Catalyst’s Site Editor

The Demo is integrated with Business Catalyst’s Site Editor so it’s easy for you or your customer to prepare the content.

With the power of repeatable regions you can quickly build your site, tweak the background and sprite controls and voila.. hello beautiful website.

What about browser compatibility?

We’ve tested the demo in IE7+, Chrome, Firefox and Safari so it’s all cross browser compatible. Some browsers may look a little “sluggish” as they all have different performance levels - so remember to minify your files and especially, optimise your images as this will greatly improve the smoothness of how your Parallax controls animate. Because IE7 and IE8 don’t play with HTML5 we’ve included a script to make them friends. If JavaScript has to be enabled for the Parallax controls we can assume this will suit the majority of those people with older browsers. But just keep in mind who your audience is and what your site looks like with JavaScript disabled as it will only display static images.

Check out the demo.

Have a look at the demo and download the sample files. If you have any questions drop us an email and remember to send us your finished work so we can showcase it to other Business Catalyst Partners!