Grow your CSS skills. Land your dream job.

How is this effect accomplished?

  • NIX
    # May 20, 2013 at 7:06 pm

    Here is the site:

    http://designembraced.com/#/HTC

    How is this scroll effect accomplished? It’s not quite parallax, it just looks like a HUGE div scrolls up as the background image is fixed. However, I can’t seem to make it work.

    Any ideas?

    NIX
    # May 21, 2013 at 2:26 pm

    Sorry for the confusion. When you click the link I provided, it redirects to the homepage. I didn’t realize that.

    I’m not talking about the shuffle letters.

    When you go to the link, manually click on the GREEN dot down below. That will take you to the page about the HTC project. Then, scroll down.

    See how the background stays put and the other elements srcoll in front of it? How is that done?

    # May 21, 2013 at 2:42 pm

    Look into parallax scrolling.

    # May 21, 2013 at 3:00 pm

    there is a good tutorial [here](http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery) it would need some tinkering but should give you the gist.

    NIX
    # May 21, 2013 at 6:01 pm

    This isn’t technically a parallax effect since there’s only one moving element. AND, I beleive this can be accomplished without JavaScript/jQuery.

    I think this can be done in PURE css. It’s something akin to the background image being fixed and the other element scrolling over it.

    I will tinker around with this tonight and post if I have a success.

    In the meantime, does anyone else want to take a shot?

    # May 21, 2013 at 8:15 pm

    > In the meantime, does anyone else want to take a shot?

    http://codepen.io/CrocoDillon/pen/HFqdK :)

    NIX
    # May 22, 2013 at 11:24 am

    @CrocoDillon YESSSSSSSS!!! WOW, that looks WAY easier than I thought. You are a ninja.

    Please keep that CodePen up because that is MAD helpful.

    # May 22, 2013 at 11:41 am

    Haha, glad I could help. Ofcourse I will keep that Pen up :)

    NIX
    # June 25, 2013 at 7:10 pm

    Anyone know how all this might be contained in a wrapper? As soon as I throw a wrapper around this, it all breaks.

    Please help! Thanks!

    # June 25, 2013 at 7:23 pm

    It’s kind of fragile I guess, put what you have in a Pen so we can see where it breaks.

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

You must be logged in to reply to this topic.

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