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:
}, 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.
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.
var scrolled = $(window).scrollTop();
What’s the resulting website look like?
The 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.