Creating a vertical scrolling parallax website

A recent front-end trend in website development known as ‘parallax design’ is changing how users interact with the web and reducing the amount of content required when producing a site.

Providing the right text for website pages is often a sticking point for both freelance clients and marketing divisions with organisations. A recent trend in website development, known as ‘vertical scrolling’ or ‘parallax’ websites, is attempting to solve this issue by reducing the amount of required text.

What are ‘vertical scrolling’ and ‘parallax’ websites?

A vertical scrolling website is generally a single page responsive website, separated vertically into  blocks, each of which is self-contained and presents a key message.

Parallax websites are similar to vertical scrolling websites. In addition, they manipulate the scroll speed of each element (such as slowing the background vertical scroll speed down) to give the impression of layers as the foreground items move quicker than the background items.

How to create one of these websites

Creating one of these websites can be advantageous when you have a concise amount of text but want to say it in a big way. It’s generally quite simple to create a vertical scrolling animation, you just need a couple of lines of jQuery. Here’s what I used:

$('.href_class').click(function(){
$('html, body').animate({
scrollTop: $(".scrollTo_Class").offset().top
}, 1000, 'swing');
});

Applying the class ‘href_class’ to a link will now make it scroll to the first element which has the class ‘scrollTo_Class’, taking 1000 miliseconds.

To create a parallax effect, you alter (take a percentage of) the ‘top’ CSS attribute in real-time as the window scrolls. First bind the function ‘parallaxScroll’ to the scroll action of the window.

$(window).bind('scroll',function(e){
parallaxScroll();
});

Next, we define the function and apply a multiplyer to the element that we want to speed up / slow down (usually the background). Note: If you’re having problems with this code you may have to apply the ‘fixed’ value to the ‘position’ attribute in the CSS of the element you’re trying to control.

function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('.background').css('top',(0-(scrolled*0.4))+'px');
}

What’s the resulting website look like?

freelanceThe end result is usually ‘web 2.0’ style, although I’ve seen examples which aren’t. Developing websites this way almost guarantees it’ll be responsive (If you’ve got responsive in mind during development) and because all the content is on a single page it only needs Google to crawl one time (per iteration).

I had a go recently, with a context in mind, and came up with this. Check it out and let me know what you think in the comments below.

John Alexander Rowley

An enthusiastic digital marketing professional passionately dedicated to increasing the online presence of businesses and individuals in order to improve engagement and ROI.

Why I love digital marketing

Redeveloping my website

JohnAlexanderRowley.com has been around since 2009, and seen three serious redesigns – The most recent of which was completed late last month. But why redevelop again in 2014 and what’s changed in this redesign?

Read the full article

Three tips to improve landing page effectiveness

Have you optimised for conversion, but still not seeing conversion rates improve? Landing page copy can often see landing page effectiveness skyrocket if done right.

Read the full article

Multiple backgrounds with CSS3

A nice little feature of CSS3 is comma separated values for background attributes, allowing multiple backgrounds to be defined against a single CSS element. No more overlaying several div’s!

Read the full article