Grow your CSS skills. Land your dream job.

Amazing Scrolling Effect

  • # January 20, 2013 at 1:03 am

    How is the provided scrolling effect achieved?

    1) http://pivotallabs.com/about/
    2) https://www.airbnb.com/jobs
    3) http://diablomedia.com/ (over bg images)

    They’re all impressive; the first tops em all. The third is clever too, seemingly with images scrolling at different “speeds” beneath.

    Thoughts?

    # January 20, 2013 at 2:38 pm

    Thats a nice scrolling effect but i wouldn’t recommend using it. Its incredibly laggy and a bit confusing. Not to mention unnecessary.

    # January 20, 2013 at 5:50 pm

    +1 to Jarolin’s comments. It’s a very interesting technique but can only remember once feeling that it was used in a way that improved the site’s message.

    I could see it being useful to swap out visual states when scrolling but beyond that it seems like something that decreases page performance simply to look cool.

    # January 20, 2013 at 6:30 pm

    I gotta agree with Jarolin here. It is always impressive what can be done in terms of animation. But sometimes it is better to focus on the usability especially when it comes to responsive design.

    I don’t think noone should ever do such effects it just depends on the target users.

    # January 20, 2013 at 7:25 pm

    @Shearp, it’s called Parallax Scrolling, and if you have the right project in mind i say go for it. Just make sure test to make sure it’s not hurting performance on mobile, and if it is you can use user agents to disable it on those devices. In my opinion parallax doesn’t really add anything on a phone, so I’d probably exclude them.

    There are tons of ways to implement it, but using a jQuery plugin called Stellar.js is probably the easiest: http://markdalgleish.com/projects/stellar.js/

    # January 23, 2013 at 1:06 am

    @dfogge — thanks for answering the question I actually came here for. sincerely appreciate it!

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".