Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How is this effect accomplished?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44911
    nixnerd
    Participant

    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?

    #135787
    Alen
    Participant
    #135890
    nixnerd
    Participant

    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?

    #135891
    NghiQuach
    Participant

    Look into parallax scrolling.

    #135892
    unasAquila
    Participant

    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.

    #135909
    nixnerd
    Participant

    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?

    #135924
    CrocoDillon
    Participant

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

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

    #136023
    nixnerd
    Participant

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

    Please keep that CodePen up because that is MAD helpful.

    #136030
    CrocoDillon
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.