So if you spent a lot of time on the internet recently you’ve probably hit a web page, started scrolling down and the background has moved with you.
What is this Witchcraft?
– Is what you are probably thinking. Well, this is actually a website design technique called the Parallax Effect.
So after a good old Googling i can tell you that the term “parallax” first came from the visual effect of 2D side scrolling video games.
Remember those palm trees in Super Mario constantly going by? No?
Well here you go watch the background below:
I hate to ruin the game for you but its effectively a parallax scrolling background with a Mario gif to top – but still awesome none the less!
Although Parallax Website Design has been around in essence for a long time its risen to popularity in the last year.
Its accomplished by using CSS fixied positioning and usually some Jquery to make it look fancy.
So why use it?
Well other than it looking pretty, the following applies:
- Great page depth and animation
- Take a story-telling approach to guide visitors through the site
- Make page visits last longer by encouraging visitors to scroll through the entire page
- Provoke curiosity
- Direct visitors to calls to action
- Reenforce website credibility with innovative interactive viewing
Yes there are some downsides
Its not all fancy websites and fairy tail endings I’m afraid, there are some downsides:
- SEO is negatively effected, websites with a single page allow only one set of meta information, one effective h1 tag, and one URL – However this can be overcome not all Parallax effect websites need to be one page!
- Lots of images and other information on one page cause slow load times, causing frustrated visitors to leave the page before they even see it. – The age old battle of fast loading times vs high resolution media, this can be improved using caching and load delays for non essential content.
- Not compatible with responsive and mobile design, OK i found this point on another blog. This isn’t necessarily true, break points can be set in the responsive design to prevent Parallax so it can still be used, and simply disabled when the screen size is a too low resolution.
So in summary it looks awesome, most of the downsides can be overcome if you’re an experienced website designer, or using an experienced website designer… (“hey Creative Brand Design, aren’t you experienced website designers?”, oh you – yes we like to think so).
If your interested we’re currently putting together some new websites for clients with Parallax effect in (we’re even redesigning this website right now to a Parallax effect website) , so if you want to see some examples, get more info or a quote for a Parallax effect site give us a call on 0207 870 5794, or use the contact form below to get in touch: