This small javascript library is designed for developers, who have no talent and time to create professional color palettes. Pick a base color, build a transformation chain, and if you haven’t choosen too weird parameters, the result will be satisfactory.
Best jQuery Core Java Script Plugins & Tutorials with Demo
Interact.js : Javascript Drag and Drop, Resizing and Gestures
Javascript drag and drop, resizing and gestures for modern desktop and mobile browsers.
Features:
- snapping to a grid, custom anchors or paths.
- cross browser and device, supporting {Chrome,Firefox,Opera}’ ‘{mobile,desktop}’, ‘ and Internet Explorer 8+
- interaction with SVG elements
- being standalone (not yet another jQuery plugin)
- introducing 0 additional DOM elements
- having(a). fluent ().interface
QuestionMark.js : A keyboard shortcuts modal for your App
When the user pushes the ? key, QuestionMark.js triggers a modal window that displays keyboard shortcuts for your app — similar to what happens on Twitter, Gmail, GitHub, etc. The modal is removed when the ESC key is pushed or the user clicks behind the modal.
I think every app that has keyboard shortcuts should do this. This could also be a generic ‘help’ menu for the app, but that would require some tweaking to the code and the CSS. For now, this works primarily as a shortcut keys menu.
Responsive Full Width Tabs with CSS & JavaScript
A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.
Google Grid Gallery with CSS3 & JavaScript
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view.
Easy Video Player with JavaScript & Html5
Easy Video Player is a powerful responsive video player that can play local videos, streaming videos from a server or Youtube videos. It only requires the mp4 format (the best and most used format on the web) and it will work on mobile devices and desktop machines no matter which browser is used including older browsers like IE7/IE8, this is made possible by incorporating four video engines into the Easy Video Player, basically it has built-in a HTML5 Youtube video engine, normal video engine, flash Youtube video engine and flash normal video engine. Packed with a huge amount of features like responsive layout, multiple instances manager, flexible skin, facebook share etc
CSS coloratum : Share & convert CSS colors
CSS.coloratum is a nifty little tool that helps you:
- Share colors with friends and colleagues (never have to go through describing a shade again, just give them the link!)
- Check out what RGB & HSL values correspond to that color keyword you keep using
- Covert HSL to RGB, because you’re done with your prototype and now it has to work in IE8 too
- …and much more!
Matter.js : 2D Rigid body physics Engine for the web
Matter.js is a 2D rigid body physics engine for the web written in JavaScript (yes, another).
Features:
- Physical properties (mass, area, density etc.)
- Rigid bodies of any convex polygon
- Stable stacking and resting
- Restitution (elastic and inelastic collisions)
- Conservation of momentum
- Friction and resistance
- Constraints
- Gravity
- Composite bodies
- Sleeping and static bodies
- Original JavaScript physics implementation (not a port)
- HTML5 canvas renderer (optional)
- Mobile-compatible (touch, scaleable)
- Cross-browser (chrome, firefox, IE8+)
- World state serialisation (requires resurrect.js)
- Built in GUI for testing (requires dat.gui.js)
- Time scaling (slow-mo, speed-up)
- Broad-phase, mid-phase and narrow-phase collisions
- Events (edge)
- Sprite texture rendering (edge)
Tilted Content Slideshow with CSS3 Transform & Animation
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation.
