The Joomla! ® Community Magazine

Design Trends - Parallax Designs

Written by | Tuesday, 01 May 2012 00:00 | Published in 2012 May
Over the past few weeks I've noticed a few more websites appearing online using parallax methods in their designs with some very impressive results.

"Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines". - Wikipedia

In terms of the parallax scrolling or parallax design, this is the technique of moving or changing background elements on a website at a different speed to that of the foreground elements. This results in different website elements changing as a user scrolls or navigates through a website. It creates the illusion of perspective movement as the user moves with the website.

Examples of Parallax Scrolling in Web Design

This is a list of six websites that use parallax scrolling in no particular order. There is a huge amount of these websites out there, but in my research these are my favourites.

 parallax design biamar website

Biamar

parallax design netlash website

Netlash BSeen

parallax design new zealand website

New Zealand

parallax-tokio

TokioLab

parallax design whiteboard website

Whiteboard

parallax-ala

Ala

 

Benefits of Parallax Scrolling

  • Visually appealing and engaging to the users
  • Highly creative way of displaying content
  • Dynamic and responsive

Downsides to Parallax Scrolling

  • Complex implementation
  • Usually very large downloads and website file size
  • Slow loading
  • Issues with backwards compatibility
  • Expensive implementations

I've managed to find a few Joomla sites using some parallax techniques but nothing really as complex as some of these website examples. Will we see parallax scrolling in Joomla templates from template shops? We'll just have to wait and see.

If you have any other examples or know of some Joomla websites that make good use of parallax scrolling, please comment and share with the rest of the Joomla community.

 

Read 28757 times
Tagged under Designers

Leave a comment

Make sure you enter the (*) required information where indicated.

[b] [i] [u] [s] [url] [quote] [code] [img]   

Comments (9)

  • avatar
    • 1
    • 0
    Chamira Athauda

    This type of design feature has been around since the days of Flash 5! I can safely say that as I have used something similar.

    But what seems to have changed from say 8-10 years ago and now is that developers do not take in to account accessibility, slower connections (more and more people are gettign online across the world and not with very fast connections/PCs).

    There are ways to check connection speed, to see if accessebility plugins are installed on a browser and then give the user the option of choosing the fat flash file intro/naigation or a static version. But this type of attention to detail seems to be overlooked now as it all takes just that extar bit of development time, and that equals costs.

  • avatar
    • 0
    • 1
    kris ray

    it's really cool how web-pages looks like when "parallax" is used. Whether it can be applied or not in designing some documents,presentations,for instance?

  • avatar
    • 2
    • 0
    Peter

    Hey Chamira,

    I have to agree with you in terms of accessibility and usability. I work a lot in that field and these types of websites really through those ideals out the window.

    The website from brazil took almost a minute to load for me.

    What does impress me is the use of CDN, speed optimisation tools, general site optimisation and geo location customisations of the NZ website in particular. I could actually keyboard navigate through the website so a user with cerebral palsy or motor/physical condition can actually browse the website, how well they can't I couldn't tell you. None of these website really take into account responsive or adaptive design either.

    I'd be impressed to see a Joomla site that uses parallax scrolling as well as being accessible at the same time.

    I'm up for the challenge of pushing the boundaries.

    Peter

  • avatar
    • 1
    • 0
    Chamira Athauda

    Hello Peter,

    Something happened, I can't exactly put a date on it, but developers just stopped optimizing their sites and just assumed everyone had a fat cable connection.

    These sites actually use great technologies like HTML 5 and CSS 2 that could be used to make sites accessible (one of the main criticism of Flash a few years back) and 'flashy' but they throw it all out of the window with an enormous jpeg load!

    You can argue of course that fashion and design sites are targeted at a different user group and accessibilty does not matter in these situations (a crass argument, but it is there), but again somewhere down the line, developers just forgot or decided to ignore that an accessible site has benefits for everyone.

    I like your challenge, and I know it will be met eventually (give me a few more years in Joomla!). Thank you for the article.

  • avatar
    • 1
    • 0
    Peter

    Hey Chamira,

    Those skills that the older developers have in optimising code and websites for the 56k modem are almost long lost. Its a shame as well.

    I'm placing my bet around late 2008 :)

    Peter

  • avatar
    • 0
    • 1
    Elton

    I Agree with you and Chamira to a certain extant. I agree that pages should be accessible to most people, but I think that sometimes you have to just push the boundaries. If you don't dare because someONE may not be able to visit your site, where will you be? How your skills are going to improve?
    I think that this type of design have its place. I won't do a full site in parallax for a little ice-cream shop near my house, but I'll probably do it for the launch of the newest and most desired product from a a big company.

    I have a little business of webpages development and our page is a shape5 template, running in joomla, modified to use parallax (www.intersect.com.br), but still I got to have the landing page on 1.5MB that is still a lot, but is kind bearable and to the day haven't had any complain....

    In the next month I'll make a new template based on other framework with a responsive layout and I'll use parallax... I don't know how small the page size will be but I'll keep it at the minimal using what I can in CSS3+HTML5...
    We will see if I can get to do a good work :D.

  • avatar
    • 2
    • 1
    Ian

    Sorry Peter - I'll go some of the way with you; they can be visually appealing as they have some novelty value - if you have the patience to wait for the site to load.

    But once you get past that initial 'ooh!' they are frankly difficult to navigate, seem to require copious mine-sweeping and are very self-indulgent. Even the text defies understanding -

    Quote:
    "We combine creative forces with systematic activists"

    Huh!?! And just what exactly is a systematic activist? A methodical extremist perhaps? A step by step anarchist?

    Clarity, accessibility, ease of use - nail it to the wall above your desk!

    Ian

  • avatar
    • 0
    • 1
    bade adesemowo

    I have seen some templates recently implementing this kind of designs .
    We have done something similar using one of the premium templates from j___arts or is it sh__e5 . (Not sure I can mention the names here) .

  • avatar
    • 1
    • 0
    Kim Brebach

    Thanks Peter - very interesting.

    I too foresee swathes of usability and accessibility issues with parallax scrolling. Has this come up for you so far? Have you tried any accessible parallax implementations?

    That's also gonna hit the bottom line hard right?