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
    1,963
    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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Yeah, it is pretty broken

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •