Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
02 Sep

jParallax Turns a Selected Element Into a Viewport

  • Information, License Free
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Easiest Tooltip and Image Preview Using jQuery

Easiest Tooltip and Image Preview Using jQuery

NikeBetterWorld Parallax Effect jQuery Plugin

NikeBetterWorld Parallax Effect jQuery Plugin

How to Adapt Your Site to Different Window Sizes

How to Adapt Your Site to Different Window Sizes

Jump to Different Sections in Viewport with jQuery.fracs

Jump to Different Sections in Viewport with jQuery.fracs

Multi-Column Hierarchical mcDropdown jQuery Plugin

Multi-Column Hierarchical mcDropdown jQuery Plugin

Autoresizing Smart Columns with jQuery

Autoresizing Smart Columns with jQuery

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • Super Smooth CSS Transitions for jQuery
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • How to Use Web Workers for Image Manipulation
  • How to Make FullScreen Page Transitions with CSS
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License410
Sponsors
Advertise Here
Partners
MaxCDN