2

There seems to be a lot of hype around parallax scrolling now-a-days. I'd like to know if there is a best way, or at the very least, a good way to design a web page that uses parallax scrolling, or parallax movement.

As a designer, I've got a lot of other stuff on my plate... Are there any tools for mocking this up so that I don't have to learn to code?

Are there any resources out there that would help me get started with parallax scrolling?

  • related: ux.stackexchange.com/questions/52759/… – Toni Leigh Jul 24 '14 at 20:22
  • Plenty of JS libraries and frameworks around to help with this. Try searching stellar.js to start with. – ArtOfCode Jul 25 '14 at 22:01
  • 2
    Doesn't including multiple js libraries cause code bloat, which results in slower processing? – eeklipzz Jul 28 '14 at 15:27
  • 1
    @ArtOfCode - focussing on the tech side is one of the mistakes to avoid, the op should be thinking about how to make the site usable first (and if they even need parallax) then worrying about the tech they use to achieve this – Toni Leigh Aug 1 '14 at 6:36
2

Put usability and accessibility concerns ahead of making the site paralax is the simple tenet that I would advise you follow in order to acheive your goal.

Remember that content comes first, that users need to acheive goals easily. Work on good, accessible navigation and keep content clear and easy to find. Remember users browse on different devices and use different interface tools (mice, keyboards, fingers, screen readers etc.). Think about scroll fatigue, the effects of motion and contrast in colours throughout all stages of any part of the site that moves.

If you have to choose between doing something in a usable, accessible way or doing it paralax, choose the usable, accesible solution.

Paralax is a fad of sorts and many bad sites are produced using this method. This is usually when paralax is put first and usability second, with the wrong choices being made by designers when facing the above question. You will be a better designer and the web will be a better place if you put usability and accessibility first, even if the resulting site hasn't any paralax features at all.

In fact, you can use subtle paralax features to enhance the visual effect, for example, images that gradually move as the page scrolls.

I love Nintendo dearly, but sadly I must share this page and say 'start off by doing none of this': http://www.nintendo.com.au/gamesites/mariokartwii/#gba

Or, in a more positive light, check out the new BBC websites paralax pages: http://www.bbc.co.uk/news/special/2014/newsspec_7617/index.html - not quite paralax in the classic sense of the word but taking the idea and refining inot something really nice (I haven't studied this link in depth for accessibility, but reference it as a very clear paralax page).

It's also worth taking with a pinch of salt any design award paralax scrolling examples as the people deciding on the awards may fall into the same faddy trap.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.