Follow
       
Stay informed

Thanks. We've added you to our list.

Blog

Abobe Business Catalyst Parter specialising in Web Development and BC integration.

Go Back

Creating a Parallax Landing Page with Site Editor

by Gary Swanepoel


Jul 19, 2012 Comments (6) share

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.

Visit the Demo.

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!


6 Comments so far

fromSimon 20-Jul-2012 08:43 AM

This is great. How does the HTML5 stuff work in IE?
Hi Simon, It's been tested in all browsers including IE7 and up. All the functionality works a treat and has JS to allow IE7 and 8 to handle the parallax controls. You'll have to add your own CSS however if you want all the pretty things like rounded
corners and shadows to appear in IE. Thanks for your feedback.

fromAlexandra 23-Jul-2012 05:20 PM

I never knew what a Parallax Website was until now. It looks fantastic. I'm definitely going to look into using this for my next job. Thanks for the tutorial!

fromTim Jensen 31-Jul-2012 10:20 AM

Great demo! Thanks for putting this together.

fromJimT 01-Aug-2012 10:03 AM

awesome work.

fromMegan Bennett 01-Aug-2012 10:47 AM

I just saw your neat offer in the BC Partner newsletter. Congrats and thanks for offering a great resource and education for BC Partners. Noticed a small issue on the template on offer - in full screen view on my large desktop monitor 2560 x 1440 px, a
left text menu bar appears throughout the layout. It’s ok at 1920 x 1080px, but outside this res, the left hand menu appears. Hope that helps in some way.
Thanks for the feedback Megan. Yes, the demo and files are optimised for a 1920px width. If you want to support larger screens you'll need to remove the fixed width on the panel container and hide the overflow on the scrolling navigation. Like so:

[data-type="panel"] {
max-width: 1920px; /* remove */
}
#scroll {
overflow: hidden;
}
.next {
overflow: hidden;
}

Just be aware you'll also need to supply larger images to fill the screen. The version we use allows full screen resizing dynamically but you'll have to make the adjustments yourself.

Hope this helps!

fromMatt O'Malley 01-Aug-2012 05:29 PM

Great demo Gary, lovely stuff!
Back to Top
Post your own comment


Captcha Image