WebAppers

/ best free open source web resources /

Shopify

jParallax Turns a Selected Element Into a Viewport

Posted · Category: Information, License Free

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions, they move by different amounts, in a parallaxy kind of way. If the layers are made of <div>s or <li>s or any other container then content can be positioned inside those layers, and Parallax provides methods for navigating to that content in response to user events.

jParallax turns a selected element into a viewport

The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of a jParallaxed element. The simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and thus appear closer, and unless a layer is smaller than the viewport, its edges are never seen.

Requirements: -
Demo: http://webdev.stephband.info/parallax.html
License: License Free

8 Comments
  • http://m4c.pl/en m4c

    Nice tool for on-line portfolio! I must try it!

  • http://irongaze.com Rob

    That is seriously cool. And a great treat for clients that want flashy glitter on their home page, so I can talk them out of Flash. :-)

  • http://www.revolution-media.net/ Andrzej

    That’s pretty awesome! Already made use of it. Check my website. This tool has so many potential uses… Thanks!

  • http://www.chattagena.com pfers

    Ke Barbaridad!!!

    It’s so cool, i’ll try to use it with my imgs

  • http://www.alfystudio.com Ahmad Alfy

    Its pretty cool! I love the last example
    but frankly I cannot think of any useful use for this tool!

    lol

  • http://www.1stwebdesigner.com Dainis Graveris

    Hey, cool – thanks for this one!

  • http://blog.olicio.us/ Oskar Krawczyk

    Well, not a huge jQ fan but this… This is pretty wicked! Need to port it to MooTools!

  • http://trif3cta.com/blog trif3cta

    Nicely done, there’s another jQuery parallax plugin floating around out there too that’s worth a look. Google “jQuery parallax” and it comes up.

    Good stuff.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons