This is an HTML5 Parallax Landing Site
with Adobe Business Catalyst's Site Editor.
Pretty neat huh?
Landing Pages can be so boring, but sometimes it's all the customer needs.
With a some clever coding and a well designed layout we can create something with a little more pizazz and stick it on the Web Basics Plan.
or just download the sample files
Each Panel (or Section) is the driving force behind this demo. It contains the content and the animated objects. They can be set to different heights (or widths if you want a more responsive design) and can contain any kind of content. Using HTML5 data attributes we can determine what type of object the elements are and apply the appropiate parallax effect.
Parallax sites have been around for a long time, however it seems only since Nike's Better World Project by Wieden+Kennedy did we see a real inspiring example for its use.
The parallax controls created in this demo are based on the work by Ian Lunn and Richard Shepherd who were both inspired by W+K's inital project.
The controls used in this demo are a easier to use and bit more intuitive. Some new functionality has been added and it all updated for HTML5 with (a modified version) of Nathan Smith's 960 Grid System and integrated with BC.
This has been tested on IE7+, Safari, Firefox and Chrome. So far it all works a treat. But if you do find a bug (how embarrassment) we'd be happy to fix it. Just email us at support[at]itbusiness.com.au with some details and a screenshot if you can.
You can apply a background to each panel with the data-type="panel" attribute within the HTML. You can then modify the speed at which the background moves in relation to the user scrolling through the site.
It's pretty easy to do. All you need to modify are two attributes for each section.
Using the section's data source data-src="image-path" attribute you can choose the background for the section.
We recommend using images 1920px x 1400px to ensure the best display for people with big screens.
Using the section's data speed data-speed="n" attribute you can controle how fast the background image moves.
The speed is relative to the window scroll. So a value of "1" will move the background, the same speed as the window.
So, in the example below we set the path for the background and moves it at half the speed of the user scrolling the window.
<div data-type="panel" data-speed="0.5" data-src="stylesheets/images/background.png" >
The navigation controls to your right are automatically created from your primary navigation which, in this demo, is placed at the top.
With some simple changes to your custom stylesheet you can modify how this looks and even add your own effects.
It will automatically figure out where you are in the site and update the .current states for all the navigational elements. This makes it easy for customers to know where they are, and move to the next panel.
We're using George Smith and Robert Penner's jQuery Easing Plugin to run the auto scroll effects, so it's easy to modify.
Just use the #scroll id to change the list and anchor element styles, and .next class for the click throughs. A .current class is placed on the <li> element of the .nav tags when the panel is in view.
I'm a Box!
Each panel can contain as many "Sprites" as you want. These can be anything from images to text boxes.
Just add the data-type="sprite" attribute to your element and you're away.
All you need to do then is position your sprite and set the speed.
In your stylesheet you'll need to absolutely position your sprites at their "stop" point relative to their container (Either the Article or Panel Section).
This "stop" point is when the top of the panel reaches the top of the screen. The sprites will move up or down from this point. If you need them to line up this where you'll set their positions to.
To control the speed of the sprites, just include the data-speed attribute. Remember the speed is relative to the scrolling speed so a value of "2" will make the sprite move twice as fast as the user scrolling the page.
A value of "0.5" will make it half the speed. You may have to play around with these to get the effect you want.
The sample files provided already have Business Catalyst's In-Context Editor controls in place, so your customer can create as many panels as they want and update their content using the Site Editor.
All you need to do is come in after (or before) and add the sprites, backgrounds and resize each of the articles to suit your design. It's up to you how you want it to work.
When you're done, and the site is live, the customer can continue to update their content on the fly.
This makes it super easy to manage a "budget" site and gives the customer an introduction to some of the features of their Content Management System.
Plus it makes you look pretty darn clever.
The sample files provided are enough to help you get a parallax site up quickly in BC. You can then modify it to suit your needs.
If you have any questions email us at support[at]itbusiness.com.au. We're happy to help.
If you're looking for something a little bit more complicated or would just rather us install it for you drop in your contact details using the form below.
Prices start from around $500, just to give you an idea of cost.