Grow your CSS skills. Land your dream job.

Background image to scroll and then stay static

  • # October 15, 2009 at 3:45 pm

    Hi everyone,

    I’m not so sure if this is a CSS or javaScript question but after seeing the following, http://www.askthecssguy.com/2009/01/mik … out_a.html, I’m fairly certain that it’ll be CSS that ends up fixing it.

    I’ll try and keep this as short as possible so that there isn’t lots of reading to be done. I’ve also tried to recreate what it is that I’m looking for in the image below, in order to give a better understanding incase I turn out to be utterly rubbish at explaining it :lol:

    [img]http://i38.tinypic.com/2qu85cx.gif[/img]

    The site that I am currently creating will be a horizontally scrolling website. There will be an image fixed to the left hand side of the outer most div. When the user starts scrolling to the right the image will slowly start to move out of sight, however before it disappears completely the image will stop X pixels from the end of it’s image and remain stuck to the side of the div, no matter how far you scroll to the right, the image will always remain in the same place. However, if the user the scrolls back to the left, then the whole image will slowly start to reappear.

    I hope that’s given a good insight into what I’m looking to do and that one of you will be able to help me.

    # October 16, 2009 at 10:59 am

    Right, I’ve managed to find a working example of what I’m looking for – http://www.welcometohr.com/

    If you scroll down the page you will notice that the pagination sticks to the top of the page once you scroll down the page a bit. This is pretty much what I’m looking to do except I’m looking to do it with a horizontal scroll.

    The more I think about it the more I think that it might be javaScript that does it. Any ideas?

    # October 16, 2009 at 12:32 pm

    Quick tip: If you ever want to see how something has been achieved on the web then use firebug http://getfirebug.com/ with Firefox, pretty handy for troubleshooting too. ;)

    Yeah your example has been done with jQuery and as far as I can see seems to be tied into the WordPress K2 template http://getk2.com/about/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".