JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+) Including: – Inertia – Snapping to a grid, custom anchors or paths. – Cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera as well as Internet Explorer 8+ – Interaction with SVG elements – Being lightweight and standalone (not yet another jQuery plugin)
Chosen is a library for making long, unwieldy select boxes more user friendly.Chosen automatically highlights selected options and removes disabled options. Chosen automatically sets the default field text (“Choose a country…”) by reading the select element’s data-placeholder value. If no data-placeholder value is present, it will default to “Select an Option” or “Select Some Options” depending on whether the select is single or multiple. You can change these elements in the plugin js file as…
Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs. Options: – Array of steps to show – jQuery selector for the element to highlight for this step – Margin for highlighted element (use CSS syntax) – Horizontal offset for the walkthrough – Vertical offset for the walkthrough – Default width for each popup
gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts. It also works great with knockout.js Requirements: http://underscorejs.org http://jquery.com http://jqueryui.com (Optional) http://knockoutjs.com
Here is another great tutorial from Codrops.Resizing and Cropping Images With Canvas.In this tutorial you will learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. You do this by creating an HTML5 canvas element and drawing the image to the canvas at a particular size, then extracting the new image data from the canvas as a data URI. Most browsers have good…
Walkway.js a small javascript library to animate SVG images consisting of line and path elements in an easy way. How to use Create a new Walkway instance with a supplied options object. When you want to start animating call .draw on the returned instance providing an optional callback that will be called when drawing is complete. Options selector (mandatory) – The selector of the parent element (usually will be a specific svg element) duration -…
Inspire by Fittext.js , Fitter Happier Text is a javascript plugin for creating performant, fully fluid headings and created by JXNBLK Fitter Happier Text replaces each node with an SVG text node and sets the viewBox attribute based on its width and height. Usage Include dist/fitter-happier-text.js in your project or install from NPM: OR
Today’s free design resource Mobile App Introduction Template with tutorial comes from Codyhouse.A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding. The template turns into video slider on desktop screen. Note: all videos in the demo have been created in Adobe After Effects, and exported as .mp4 using Adobe Media Encoder.
Beautiful and responsive progress bars with animated SVG paths.You can use built-in shapes or create your own paths and also customize the animations as you wish. ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+. ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers. For example…
Tailor-made text to fit your needs! Responsive text to fill the height of the parent element or ellipse it when it doesn’t fit.The parent element needs to have a height (fixed or percentage). How To Use