SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which jQuery to use?

    Hi all,

    During my daily surfing round I found this website. You will notice, when navigating from page to page, it is actually a vertical scrolling site. I like the effect of the two divs going in opposite directions, but can't figure which of the jQuery plug-inns I see in the page source is used to get this effect. Can any of the Javascript gurus here on sitepoint tell me which plug-inn to use or of a tutorial that explains this effect.

    Thank you so much in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The effect that this site uses is called Parallax Scrolling.
    You can see more examples here: http://webdesignledger.com/inspirati...-in-web-design

    There's a good tutorial on the basics here: http://net.tutsplus.com/tutorials/ht...ing-technique/

    The site in question seems to be using a script called goofyScroller.js and some inline JS to acheive this effect.
    I don't think it was done with a plugin.

    HTH

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    See what the site looks like with JS off before you get too excited about this kind of site construction. [It's a blank white page. ]

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Off Topic:

    Yeah, it is pretty broken

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ Pullo: Thank you so much for your reaction. But both in the examples and the tutorial it is all going in one direction, where I find the divs going in opposite directions very interesting. Do you have any other suggestions?

    @Ralph: I am not too excited. I just found it an interesting effect. I only hope I can get it working in IE as well otherwise it is not an option in the first place
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by donboe View Post
    I find the divs going in opposite directions very interesting. Do you have any other suggestions?
    Sure do.
    This is one of my favourite Parallax Scrolling plugins: http://dev.jonraasch.com/scrolling-parallax/

    If you look in the docs under "Animation options for Scrolling Parallax", you can see that it has this functionality:

    reverseDirection (Boolean)
    Set to true to cause the parallax scrolling to move in the opposite direction.
    I don't think there's a demo of exactly that, though

    If you want a bit more inspiration, look here: http://www.tripwiremagazine.com/2012...scrolling.html
    I'm sure you'll find something.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •