background preloader

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax: A jQuery Plugin
Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. Basic use of the Scrolling Parallax plugin is extremely easy. The Scrolling Parallax plugin is also very versatile. Download the Scrolling Parallax Plugin for jQuery Scrolling Parallax for background images Using the parallax for a background image is incredibly easy. $.scrollingParallax('img/background-parallax.jpg'); This will append the image to the page, and stretch its dimensions as described above. This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling. Scrolling Parallax on jQuery objects $('div.parallax-div').scrollingParallax(); staticSpeed : .2

jQuery and CSS single page portfolio, a vertical parallax navigation experiment « Design and Development tuts – TutorialShock Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery

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 jqDnR :: Minimalistic Drag'n'Resize for jQuery Who? jqDnR Minimalistic Drag'n'Resize for jQuery What? jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc.

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

jRumble | A jQuery Plugin That Rumbles Elements About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag. Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples Documentation Options/Defaults Known Issues Changelog v1.3 - December 3, 2011 v1.2 - October 23, 2011

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 Adapt.js - Adaptive CSS 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.

Chosen - a javascript select thingy Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right to Left Support

Related: