jQuery.parallax. Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport.
There are various ways to style jParallax effectively. Options Layer Options Events. Skrollr. Stellar.js. Parallax.js. Parallax.js is a nifty Javascript framework that allows you to easily add sliding page trasitions and parallaxing backgrounds to any project. Very light weight, very cool. Just like fezes. Add accepts either a name and an element, or just an element. With the latter Parallax.js will try to use the element's Id as the name. Pages can be accessed using their name as a property on the Parallax.js object. parallax.add("foo", $("#page1")) .add($("#bar")); parallax.foo; //<- woah!
They're properties now! To get a nifty parallaxing background, just set a jQuery element to be Parallax.js's background. Parallax.background = $("body"); parallax.scaling = 0.4; //background moves 40% with the pages Some like it fast, some like it slow. Parallax.speed = 1200; //In milliseconds of course! The meat and potatoes. Sometimes we don't need the fanciness. //All pages start out hidden, //remember to show your initial page! Parallax.js has two special pages that it fills in for you. Demos - JavaScript InfoVis Toolkit. JavaScript InfoVis Toolkit Create Interactive Data Visualizations for the Web Home ● Download ● Builder ● Donate Area, Bar and Pie Charts Sunburst Icicle ForceDirected TreeMap SpaceTree RGraph HyperTree Advanced/Other copyright © 2013 SenchaLabs - Author: Nicolas Garcia Belmonte.
gRaphaël—Charting JavaScript Library. Raphaël—JavaScript Library. Protovis. Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction.
This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates May 28, 2010 - ZOMG! Getting Started.