HTML5, CSS3 and jQuery are the most hyped tools of 2012. Most people call this new hype HTML5, but HTML5 is only a a new set of standards, semantics and rules for coding website markup that help us interact with the newest native browser features.
What makes really cool effects on today’s websites is not a markup, but set of new innovative CSS3 rules and a bunch of awesome JavaScript (read jQuery) code.
Table of Contents
CSS3 Responsive slider without JavaScript
Yeah, that’s not a mistake. Ian Hansonn (@teapoted) at CSScience made a responsive CSS3 slider using radio buttons and no JavaScript.
As Ian says:
The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.
You can see the demo on CSScience.
Sigma.js – lightweight JavaScript library to draw graphs
Sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:
- Display interactively static graphs exported from a graph visualization software
- Display dynamically graphs that are generated on the fly
You can see a bunch of cool visualization examples on Sigma.js example page, so go and check it out.
jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.
Scrolling can be done with the mouse wheel, up/down arrow keys and spacebar. The space bar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scroll bar is also included, which allows click and drag scrolling. The scroll bar is enabled by default.
Flickrush – jQuery Flicker plugin
Flickrush is a jQuery plugin designed to make it quick and easy to add your flickr photo stream to any web page with minimal effort. Fully customisable you can choose the number of photos, randomise the ordering and style to fit in with any blog or web page.
Demo can be seen here and documentation can be seen on Flickrush main page.
Timeline
Timeline plugin is used to create beautifully crafted timelines that are easy, and intuitive to use.
Timeline is also great for pulling in media from different sources. It has built in support for pulling in Tweets and media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types will be supported in the future.
You can see and download it on Timeline.
iPicture
iPicture is a jQuery Plugin to create interactive pictures with extra descriptions presented as tooltips.
It comes with a wizard to help you generate the effect as soon and as easily as possible simply by dragging and droping. More info on plugin’s page.
RainBow – JavaScript Code Syntax Highlighter
Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (1.4kb), easy to use, and extendable.
It is completely themable via CSS. Rainbow on its own is very simple. It goes through code blocks, processes regex patterns, and wraps matching patterns in tags. All the theming is left up to CSS.
cssFx.js – CSS3 property polyfill
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth.
Features that are supported includes: box shadows, border radius, multiple columns, border image, RGBA, transforms, keyframes, transitions (and properties inside transitions), flexible box, gradients, and a ton of other useful things (like opacity, ellipsis, and inline-block).
Browser support includes: Firefox 3+, Chrome 1+, Internet Explorer 6+, Safari 3+, Opera 9+.
jQuery Retina plugin
Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops.
Until more desktops have retina displays, this requires a client side solution. jQuery Retina plugin will swap out the image source for an image that is sized for retina displays.
The plugin will check if the device retina enabled, and if so, swap out the image with one that is twice as large.
While calling the plugin, the user can also specify if they want to check if the file exists or not.
Plugin and demo can be seen on official jQuery Retina plugin page.
Webshims lib
Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.
The more features a browser supports natively, the more lightweight webshims will be. It works in IE6+, Firefox 3.6+, Safari 5.0.3+, Safari for iOS 5+, Chrome 16.0+, Opera 11.6+.
Bryan, thanks for your comment.
I hope that you will find more interesting articles on this blog.
Pingback: HTML5 | Pearltrees
Pingback: 10 jQuery pluginova i CSS3 tutoriala | 3kolone.org
Comments are closed.