Grow your CSS skills. Land your dream job.

Parallax scroll effects…not background scrolling

  • # June 19, 2014 at 10:32 pm

    theres this website and the js is crazy for it and there are literally no decent tutorials out there for this kind of parallax…and help or guidance would be greatly appreciated..

    http://davegamache.com/parallax/

    __
    # June 19, 2014 at 11:51 pm

    Did you read his blog post, or look at his github repo?

    You might also be interested in greensock/ GASP js , which @Joe_Temp turned me on to.

    NIX
    # June 20, 2014 at 11:30 am

    Scroll Magic is THE BEST general-purpose parallax tool out there. Period. It’s ACTIVELY maintained and is built on top of GSAP, just like Traq mentioned.

    This is the third iteration by these developers. First it was “Scrollorama,” then “Superscrollorama,” now it’s “Scroll Magic.” The docs and interactive tutorials are OUTSTANDING and if you submit issues on Github, Jan Paepke will respond within a day usually either with an answer or a bugfix.

    Keep in mind, Scroll Magic just ties GSAP animations to scroll position in a really easy way. This is still basically a GSAP utility, with really fine grained controls for scroll tricks.

    You can tie literally anything to scroll position and the animations are as fast as CSS transitions. GSAP is crazy fast.

    Scroll Magic has decent support for mobile devices, but if that’s what you’re looking for, @shaneisme once shared a sick mobile parallax tool. I forget what it is called.

    # June 20, 2014 at 12:55 pm

    This one: http://matthew.wagerfield.com/parallax/

    NIX
    # June 20, 2014 at 1:02 pm

    Yup. That’s the one!

    # June 20, 2014 at 3:24 pm

    Commenting here as a future reference (I don’t know why we can’t “save” posts. It’s a learning website. I’m looking at you Chris!)

    Seriously though, the best way to really learn the ins and outs of parallaxing, is to just try and build a site that parallaxes. This is one of the few instances I suggest doing it before trying to learn it. Here was my first shot at it a couple years ago. The code is crap but I’ve gotten better at it with time.

    http://tourdowntownla.com

    (Also first time with a loading screen which sucks too, haha)

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

You must be logged in to reply to this topic.

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