Experimenting with Inverse kinematics, Catmull-Rom Splines & Wander Behaviors
Pure HTML5 Charts by jqChart for jQuery
jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers (IE 6+, Firefox, Chrome, Opera, Safari) and devices, including iOS and Android mobile devices. Full Touch support.
Features:
- High performance. Uses pure HTML5 Canvas rendering
- Cross-browser support – tested with IE 6+, Firefox, Chrome, Opera, Safari
- Supports iOS and Android mobile devices
- Full Touch Support
- Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar Charts
- Stock and Candlestick Financial Charts
- Real-Time Charts
- Scrolling/Zooming
- Animations
Fokus : Emphasized text-highlighting using JavaScript
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.
The library has no dependencies and weighs in at around 3kb. A <canvas> element is used to paint the cut-out cover. Works in most modern browsers except IE and touch devices.
jQuery prettyCheckable
A jQuery plugin to replace checkboxes and radios for custom images.This plugin replaces the default checkboxes and radio inputs for better looking ones.
Features:
- Custom design
- Four color options
- Better look & size
- Super easy implementation
- Selectable with Tab and checkable with keyboard
- Change events & Chainning preserved
- More area of click/touch. A plus for mobile devices
CSS 3D Restaurant Menu Concept with jQuery
Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. We’ve experimented with some simple concepts for restaurant websites and came up with a 3D folded menu (a real menu, not a “web” menu). The result is a restaurant website template where the menu will open by unfolding. Clicking the linked items will reveal a modal overlay which contains some more info.
Since this “flyer” structure requires a decent amount of space, and, although we will make this responsive, we’ll add a media query for smaller screens where everything will fall back to a simplified stacked structure. The same will be applied for browsers that don’t support 3D transforms.
Styling Dark Select Dropdown With Dropkick.js
HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>, <a>, <ul>, and <li> elements can be styled? Today, we’ll style the Premium Pixels Dark Select Dropdown using DropKick.js to help us do just that.
jQuery Responsive IFrames
IFrames are commonly used to allow embedding of third-party content. Many popular services, such as YouTube and Facebook, make extensive use of IFrames in their embeddable widgets.
On a responsive website, all page components must be responsive. There are multiple ways of making an IFrame responsive. Some responsive IFrame use-cases can be solved with simple Javascript and CSS. Our library targets a challenging use-case in which embedded content:
Can have unknown width and height
Can have unknown width/height ratio
Can change its width or height as users interact with dynamic content and we want the size of the IFrame to change accordingly to avoid scrollbars.
Making IFrames with such constraints is a challenging task. We developed this tiny (0.9KB minified and gzipped) jQuery plugin, at NPR, to make the task easier.
For simpler use-cases, e.g. targeting the embedding of fixed ratio video content, you may want to check-out: FitVid.js, instead.
lenticular.js : jQuery tilt-controlled Images
Remember those cards from the bottom of the Cracker Jack box – the ones that changed images as they were tilted? Well, lenticular.js brings that interaction to the iPhone. It can be used for fancy-pants product views or just to slather some whimsy onto a boring.jpg. Check out the demo on your iPhone.