Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

I've noticed this on a lot of sites lately. Does anyone know how to do it?

Options
  • 20-02-2015 5:10pm
    #1
    Pompous
    Registered Users Posts: 648 ✭✭✭


    Click here, scroll about half way down and you will see it. The image of the bar scrolls at half of the speed of the rest of the page, creating an illusion of a third dimension.

    It's really cool and I'd love to add it to the site I'm making at the moment, but I don't have any clue how to do it or even what keywords to search in google in order to find out.

    Any help would be greatly appreciated.


Comments

  • Options
    #2
    Atomic Pineapple
    Registered Users Posts: 18,272 ✭✭✭✭Atomic Pineapple


    Its called Parallax Scrolling - https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/


  • Options
    #3
    catallus
    Closed Accounts Posts: 6,106 ✭✭✭catallus


    Now I want a Chinese :)

    Well played OP.


  • Options
    #4
    Pompous
    Registered Users Posts: 648 ✭✭✭Pompous


    Excellent thanks!


  • Options
    #5
    EIREHotspur
    Registered Users Posts: 763 ✭✭✭EIREHotspur


    It can be a nice effect.....just be carefull to preview your Responsive pages on mobile....I found parallax can mess those up if not done right.


  • Options
    #6
    Pompous
    Registered Users Posts: 648 ✭✭✭Pompous


    Thanks for the tip, although my site doesn't have to be compatible with mobiles. It's a second year computer science project and I'm not sure if I'm even going to be able to pull off paralax scrolling. It's very complicated. I will certainly try, though.


  • Advertisement
  • Options
    #7
    Aswerty
    Registered Users Posts: 586 ✭✭✭Aswerty


    Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.


  • Options
    #8
    BrokenArrows
    Registered Users Posts: 7,500 ✭✭✭BrokenArrows


    Aswerty wrote: »
    Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.

    I agree with it being gimmicky but it depends on the website.
    Not a great idea for an information website but looks nice and probably works well for bars/restaurants who need to go for style over substance. :)


  • Options
    #9
    bpmurray
    Registered Users Posts: 1,275 ✭✭✭bpmurray


    Aswerty wrote: »
    Personally I think it looks very gimmicky. I'm not too sure if that's a commonly held perception though. It reminds me of power point slides with spinning text.
    It's commonly used in one-page websites and it is very effective in that situation, where scrolling down the page gives a different effect similar to a page turn.


  • Options
    #10
    Aswerty
    Registered Users Posts: 586 ✭✭✭Aswerty


    bpmurray wrote: »
    It's commonly used in one-page websites and it is very effective in that situation, where scrolling down the page gives a different effect similar to a page turn.

    Effective at what? Also correct me if I'm wrong but the page jumping isn't the same thing as parallax. It's just another nightmarish fad that favours form over function.

    This is how one of these types of pages is done well.

    Below are two other terrible techniques I'd lump in with Parallax (including the aforementioned page jumping).

    Page Jumping:
    http://onlinedepartment.nl/

    And the worst offender; scrolling up/down is mapped to left/right:
    http://www.dasselundwagner.com/en/


  • Options
    #11
    bpmurray
    Registered Users Posts: 1,275 ✭✭✭bpmurray


    Well, I prefer the more fluid examples.


  • Advertisement
  • Options
    #12
    Atomic Pineapple
    Registered Users Posts: 18,272 ✭✭✭✭Atomic Pineapple


    It's hard to do the Parallax scrolling effect right and along with other effects mentioned it is overused way too much and can be added to a website just for the sake of it when it doesn't suit the website. That said if it suits the website and is done nicely I like it (rare case though)

    Another option if you want to give your website a feeling of being more alive then add some subtle animations? Maybe something like this - http://www.mashboard.com/


  • Options
    #13
    Pompous
    Registered Users Posts: 648 ✭✭✭Pompous


    Atomic Pineapple wrote: »
    Another option if you want to give your website a feeling of being more alive then add some subtle animations? Maybe something like this - http://www.mashboard.com/

    Can you do stuff like that using css?


  • Options
    #14
    Atomic Pineapple
    Registered Users Posts: 18,272 ✭✭✭✭Atomic Pineapple


    Pompous wrote: »
    Can you do stuff like that using css?

    Sure, depending on browser support you should be able to add animations using CSS - http://www.w3schools.com/css/css3_animations.asp


  • Options
    #15
    Banta
    Registered Users Posts: 262 ✭✭Banta


    There's quite a few techniques for CSS only implementations of the parallax effect.

    The css only implementation sort of started here: http://keithclark.co.uk/articles/pure-css-parallax-websites/ and was then adapted a bit here: http://codepen.io/scottkellum/details/bHEcA

    However, as with everything, the problem is support. The "vh" element has a lot of issues with iOS devices for example. I understand that's not important for OP right now, but for anyone else reading the thread I've included it. You can check the "Can I Use" site for support. So for example for the vh element http://caniuse.com/#search=vh

    The Keith Clark link, for example, doesn't work on IE11 and below as the transform-style: preserve-3d isn't supported.

    OK, I'm just getting depressed now on who supports what and where now again, having had to go through this on a client's site recently and was constantly having to workaround / fix something after thinking "ooh lovely, CSS only". A lot of .js scripts for this also have issues on some devices.

    So, to OP, yep you can do it. Called 'parallax' as has already been pointed out previously. If it's just for a project and you know the exact devices, OS's and browsers it'll be viewed on, then you can implement it easy enough. For anyone else, lots of testing of various different implementations on different devices etc. will be required. Fun fun!


Advertisement