Parallax is a design that can be seen in a multiple of sites on the web today. But where did this scrolling trend come from and is it still relevant today, or is this effect a dying method? That's what I would like to know and will explore what it is, some of the features, it's benefits, and best practices to implement them. Also, what kind of sites are they good for?Before we get into the nitty gritty of things let's define what parallax scrolling is. Parallax is a web design method that gives a 3D affect to a 2D plane. So for example, as you scroll down a website the background will move at a different rate than the foreground or any elements on the foreground.A good example of this is the site...
So to start this subject matter off I think it's good to start with the origin of a thing.
Ironically not. You can actually trace parallax scrolling in early video game adaptations. If you ever played video games such as Super Mario or Sonic The Hedgehog, I was a big fan of sonic, you can see this effect at work.A Side note with Wong: parallax does not have to be only a vertical effect (up and down), but can be horizontal as well (side to side).The horizontal parallax method was clearly seen in these video games. As you you would move your character, like sonic, forward through the course, the background would move at a different speed apart from the foreground elements.So this gave a sense of visual depth into this 2D world, as opposed to now in video games where you can move the character in any direction on the screen. Oh how the evolution of time has changed technology.With this technique now being shifted to the web, around 2011, we now have a similar 2D 3D effect to our websites. One site that is given credit for this during that time was the website "nike better world". It was something new and they wanted to give their users a new experience.A Side note with Wong: did you know when parallax scrolling was just introduced it was done with javascript, but now with CSS3 it has the capabilities of implementing this feature with no javascript needed.It's pretty cool. but how does this cool effect affect our user experience.
The heading for this subsection may seem redundant as I write out this section but I couldn't think of any better terms for it.One thing to think about when your going to use this technique is your why. Not only why but WHO exactly will you be trying to attract to your website? As a front end web developer your code should be to guide how you want users to experience and interact with your site, as well as other developers navigating through your code.Doing my own research on this subject of using parallax design, one of the most recurring problem I seen that was said, especially when the trend just came out, was the overuse on the site. In my solution to that, as well as many other things, is...K.I.S.S. (keep it simple silly) ^_^Parallax is good for, you ready for it...STORYTELLING!.I think with a history of animation and design I really enjoy the idea of a good story. I heard in a podcast from "Human Tech" that 65% of conversation is storytelling. So if more than half of how we communicate is us telling each other stories, than why not implement that same idea into websites. I mean who doesn't love a good captivating story?That is why I am a big advocate of learning how to tell good 'web stories".A good and simple example of this is shown with the site by David Paliwoda and Jesse Williams.How far is to Mars?With parallax being a good addition to storytelling that does not mean you overload your website with every section in parallax scrolling. No, being strategic and simple is your best option to creating effective web pages. This point leads me into my next point that you should look out for when adding parallax scrolling to your website.
There are 3 factors that you should think about when implementing parallax scrolling, more importantly, how you implement this bad boy. As I said before, it can be really effective on how you use it but be aware of
Parallax can affect these three things tremendously. We'll start with the first usabilityWho are you trying to attract to your site, how do you want your visitors to interact, and most importantly, what do you want your visitors to gain from coming to your site. You have to almost think as a business man in a sense, which I believe all things boil down to great storytelling, which is true according to the stats. Your site is the product and how will you sell your site to visitors.Every element on the page needs to be thought of thoroughly when coming up with the design. Which leads to my next point...Load time.It's a known fact that user's attention span is short when it come to the internet of things. So how fast your page loads will dictate how long a user will stay on your site. With a page loaded with many sections of parallax can hinder your load time. However, I think with the adaptation of parallax and CSS3 it helped tremendously with load speed times.and last but certainly not least is SEO.Nowadays it is imperative that you have a SEO strategy and sometimes parallax can be a hindrance. Reason being is that parallax scrolling is best designed for one page layouts. This does not give your site a lot of options for crawlers to crawl. However, today with the growth of parallax you can implement this technique on different pages, just remember to keep it simple.So to wrap things up, my belief is parallax is not dead and can still be relevant in today's web designs. The trend might have died out but the method itself is still evident in 100's of site seen today, even in popular sites like appleApple iMacThe important thing is how it is used.For a simple guide and best practices of where it is best used are portfolio sites and landing pages.If it is a great storytelling technique than it's best to use it in areas where storytelling is best used. Usually heavy content sites and ecommerce sites are not common places, but who is to say YOU can't. The only thing limiting you is your creativity. There is nothing to say you can't use one thing or another if you creatively implement a technique. A story is a story, but what makes one good from great is how you tell it.So how will you tell your story with parallax?
