Today we’ll create an animated, horizontal bar graph using jQuery, CSS3 properties (such as: gradients, border-radius, rgba) and CSS3 transitions.
Slider Revolution Responsive jQuery Plugin
Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.
This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS !
NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars. Compatible with Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers) Compatible with iOS devices as iPad. So you have scrollable divs for iPad.
Infinite Ajax Scroll, a jQuery plugin
Infinite Ajax Scroll is a plugin that turns you existing pagination into an infinite scrolling one, with ease.
Features
- Infinite scrolling increases usability for you visitors, by removing an extra click
- Increase average time spent on your website by visitors
- Graceful degration for browsers without JavaScript
- Allows for multiple instances, like for posts and comments
- Easy to implement
- Clearly coded and well documented
- Similar technique as seen on Twitter, Facebook, Google Reader and many more…
EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy
EaselJS is a library to make working with the Canvas element easier. It provides a display list to allow you to work with display elements on a canvas as nested objects. It also provides a simple framework for providing shape based mouse interactions on elements in the display list. This is useful for games, generative art, and other highly graphical experiences.
EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
Mobile App Design/Dev: Building Navigation with jQuery
Smartphones are now equipped with some very efficient web browsers. JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code.
In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Even better, the layout can even expand to display properly in regular desktop browsers such as Chrome or Firefox.
AttC : Automatically convert a Html table to Google Chart with jQuery
jQuery based javascript plugin that converts a standard HTML table to an Google visualizations chart and displays it on the page.
Currently converts a table to one of these google charts:
- bar
- column
- area
- line
- Pie
Responsive 3D Panel Layout in jQuery & CSS3
Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.
Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).
How to Create an Video Player in jQuery, HTML5 & CSS3
In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.
jQTouch : Zepto/jQuery plugin for mobile web development
jQTouch is a JavaScript plugin which works with either Zepto.js or jQuery, and comes with smooth animations, navigation, and themes for mobile WebKit browsers (as found in iOS, Android, BlackBerry, and WebOS).
Features:
- Easy to install. Get up and running in a few minutes.
- Entirely customizable with selector options
- Theme support, including default Apple and jQTouch custom themes
- Callback functions throughout, including swipe and orientation change detection
- Page history management and CSS3 page transitions, including 3D flip, cube, and swap
- Failover to 2D animations for devices that don’t support 3D
- Easily allow apps to run in fullscreen mode with custom icons and startup screens
- The power of jQuery to build AJAX applications