SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) controller.removeTween('#fade'); Example:
Stripe Generator - ajax diagonal stripes background designer 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
Forms Default Form To create a default inline form, add the pure-form classname to any <form> element. <form class="pure-form"><fieldset><legend>A compact inline form</legend><input type="email" placeholder="Email"><input type="password" placeholder="Password"><label for="remember"><input id="remember" type="checkbox"> Remember me </label><button type="submit" class="pure-button pure-button-primary">Sign in</button></fieldset></form> Stacked Form To create a stacked form with input elements below the labels, add the pure-form-stacked classname to a <form> element alongside pure-form. Aligned Form To create an aligned form, add the pure-form-aligned classname to a <form> element alongside pure-form. Multi-Column Form (with Pure Grids) To create multi-column forms, include your form elements within a Pure Grid. Grouped Inputs To group sets of text-based input elements, wrap them in a <fieldset> element with a pure-group classname. Input Sizing Required Inputs Disabled Inputs Read-Only Inputs
scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"
Free simple icons for your next project Follow @iconmonstr Support me ads via Carbon 3 months ago 4 months ago 5 months ago Made in Germany © 2014 iconmonstr Ask me a quick question @iconmonstr Imprint License Donate Dashing - The exceptionally handsome dashboard framework. Here's a sample dashboard with 2 widgets. With a name of sample.erb, it becomes accessible at /sample. Each widget is represented by a div element needing data-id and data-view attributes. data-id: Sets the widget ID which will be used when pushing data to the widget. data-view: Specifies the type of widget that will be used. Both these widgets are of the same type: Number. Anatomy of a widget an HTML file used for layout and bindings a SCSS file for styles a coffeescript file which allows you to handle incoming data & functionality Number widget's HTML: Widgets use batman bindings in order to update their contents. You may notice the piping '|' characters in some of the data-bind's above. Number widget's Coffeescript: By default, whenever a widget receives JSON data, it mixes in the received data onto itself. Laying out the widgets Dashing uses gridster.js to create a layout for your widgets.
:: Alessandro Ferrini :: FerroSlider jQuery Plugin A simple, powerful, responsive and customizable jQuery sliding plugin. Powered by HTML5 and CSS3. Latest version : 2.3.3 Downloaded 40768 times What is it? FerroSlider is a free jQuery plugin that allows you to organize the contents of websites in a unusual and cool way and navigate through them with a sliding effect. Slide everything Organize any type of content, such as images, text, pages, lists and so on. The Matrix The contents can be positioned and organized as you want: by row, by column or using a custom displacement, also called "The Matrix". Brand new FerroSlider 2 has been completely recoded from past versions. Responsive & universal FerroSlider uses standard HTML and CSS rules and is responsive and compatible with all the major browsers and with the two main mobile environments, Android and iOS. What you need FerroSlider only needs the main jQuery core (>= 1.9), and the Rico Sta. Compatibility
accounting.js - format money / currency in JavaScript accounting.js is a tiny JavaScript library for number, money and currency formatting, with optional excel-style column rendering (to line up symbols and decimals). It's lightweight, fully localisable and has zero dependencies. Library Methods formatMoney() - format any number into currency The most basic function of this library is money-formatting numbers, with currency symbol, precision (places), and thousand/decimal separators: formatColumn() - format a list of values for column-display This table demonstrates how accounting.js can take a list of numbers and money-format them with padding to line up currency symbols and decimal places (NB: white-space:pre is needed for the browser to render the padded spaces): // Format list of numbers for display: accounting.formatColumn([123.5, 3456.49, 777888.99, 12345678, -5432], "$ "); formatNumber() - format a number with custom precision and localisation toFixed() - better rounding for floating point numbers Demo / Try it out Money formatting: 1. 2.
Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP) Quick links: Jump Start Introduction Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did. What exactly is GSAP? The GreenSock Animation Platform is a suite of tools for scripted animation. TweenLite: the core of the engine which handles animating just about any property of any object. Loading the GSAP files Check out the download screen where you can download a zip containing minified and uncompressed files, or you can just paste a CDN link right into your page. Since TweenMax includes TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin, this one file gives you tons of goodies to play with and the CDN should help things load very quickly. Basic tweening
linkedin.github.io/hopscotch/ Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Event Callbacks Callbacks for tour events: onStart, onEnd, onShow, onNext, onPrev, onClose, onError Multi-page tours Take your tour across pages! i18n support Create tours in all the languages of the world. Lightweight Callouts Create single instance callouts for those times when one is enough. To get started using the Hopscotch framework, simply include hopscotch.css and hopscotch.js on your page. <html><head><title>My First Hopscotch Tour</title><link rel="stylesheet" href="css/hopscotch.css"></link></head><body><h1 id="header">My First Hopscotch Tour</h1><div id="content"><p>Content goes here... Then in your my_first_tour.js file, define and start your tour. That's all there is to it! Basic step options All step options Mandatory Optional
Masonry