Layers that move up when user scrolls down

Discussion in 'HTML & Website Design' started by Webzilla the Great, Apr 27, 2016.

  1. #1
    I am not sure what the technical term is but I want to put functionality in a website like that used on http://www.victorsandspoils.com/. Specifically the way the section entitled Our Process 4 moves over a stationary back ground.

    Also want to learn how to use fuctionality like on http://www.publicis.com/ where panels (for lack of a better word) come up and "stack" on top of other panels.

    The right name for either technique or a link to a tutorial would be greatly appreciated.

    Thanks for reading this and for your anticipated answer/help.
     
    Webzilla the Great, Apr 27, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,328
    Likes Received:
    1,708
    Best Answers:
    31
    Trophy Points:
    475
    #2
    I am not the right person to explain any of that in detail, but that thing is called position:fixed; (or fixed position).

    I am 99% sure you will get a negative feedback from some of the users here on you wanting to implement that type of navigation on your website.

    Not only that to archive a stacked up effect you will probably need to use jquery (Which again may not be the best thing to do. In my opinion jquery should be used only when everything else fails to work.).

    I just Googled this. It will give you an idea on how something like that is done: http://jsfiddle.net/systemfehler/Rj5uy/

    Just Google: "fixed navigation bar jsfiddle" to see more solutions.
     
    qwikad.com, Apr 27, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Well, the first question from the OP is probably about parallax scrolling - if you use that on Google, I'm sure you'll find plenty of tutorials.

    As for the second question, there is no need for javascript - you can look here: https://jsfiddle.net/rvvbg0tt/ for an example of just using CSS to animate and show a hover-box on top of whatever is in the bottom container.
     
    PoPSiCLe, Apr 27, 2016 IP