jRumble | A jQuery Plugin That Rumbles Elements About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag. Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples Documentation Options/Defaults Known Issues Changelog v1.3 - December 3, 2011 v1.2 - October 23, 2011
Raphaël—JavaScript Library 8 jQuery Plugins for Enhancing Typography Being able to improve and manipulate web typography has always been one of the biggest changes for web designers. But thanks to the ease of use and popularity of jQuery, developers are coming up with some clever ways to do just that. For this post we’ve gathered 8 useful jQuery plugins that allow you to do things to type that couldn’t be done before. Arctext.js Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius. Textualizer Textualizer allow you to transition through blurbs of text. jqIsoText Some content on our pages are more important than other and we want to made him eye catching. BigText BigText makes text big. jQuery Text Resizer The Text Resizer plugin attempts to solve one problem: that of resizing text on demand by the user. slabText A jQuery plugin for producing big, bold & responsive headlines. FitText Lettering.js Related Posts
A Mac OS X-style Dock In JavaScript Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily. Compatible browsers The code has been tested and confirmed to work in the following browsers: Firefox 1.5 on Mac OS X Firefox 2 on Ubuntu Linux Firefox 2 on Windows (slightly jerky due to event handlers being given a higher priority than intervals) Internet Explorer 6 Internet Explorer 7 Konqueror 3.5 on Ubuntu Linux Opera 9 on Windows Safari 2 on Mac OS X Safari 3 on Windows Implementing the Mac-style Dock Before implementing the dock, please read the notes on usability. Download one of the files listed above and upload it to your website. The dock can then be created as a new JavaScript object. The constructor takes five paramaters: node imageDetails name sizes extension
13 Amazing Examples of HTML5 and CSS3 Startup Framework Close 2010, Jul 14 // Kevin Liew // 34 comments // Inspirations 13 Amazing Examples of HTML5 and CSS3 Advertisement Introduction Another post that demonstrate the power of HTML5 and CSS3. In case you missed my previous post regarding CSS and HTML5, you can read it afterward. Author: Kevin Liew Kevin Liew is a web designer and developer and keen on contributing to the web development industry. Share the love 3,701inShare Related Posts 10 Incredible CSS3 Drawing You Must See 11 Impressive Google Experiments for Chrome Creative and Funny Illustration of Famous Logos 34 comments Infonomics Wed, 11th April 2012 Thanks for sharing. Luiz Fri, 13th July 2012 thanks..I think I can now develope my own website. deepak Mon, 16th July 2012 it's amazing Reply dan b Wed, 8th August 2012 Flexpaper has some neat html5 examples Reply Jason Reynolds Tue, 25th September 2012 Фън Шуй Tue, 13th November 2012 Nice! Leave a Comment Advertisement
WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font era, WhatFont also detects services used for serving the font. Font name? Want to know more? Want the font? Want to share your discovery? ← Drag this to your bookmark bar to install On any webpage, click your WhatFont bookmark to use the tool. Full support: Firefox 3.6+, Chrome 9+, Safari 4+, Internet Explorer 9. Limited support: Internet Explorer 8. ↑Install the extension from Chrome Web Store. On any webpage, click WhatFont button to use the tool. Download Now After downloading, open the extension file to install. The quick brown fox jumps over the lazy dog. Email chengyin.liu@gmail.com Twitter @chengyinliu The tool should auto-update itself. Hosted on Github
HTML5 Website Showcase: 48 Potential Flash-Killing Demos So you’ve heard all rumors about HTML5 would take over Adobe Flash. While most web community argues that it’s possible or not, you must be wandering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash. That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired. Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below. Animation The HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. Audioburst Animation A comfortable and fantastic animation created with HTML5’s canvas and audio tag. Ball Pool Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be. Blob Sallad A HTML5-spawned creature that would please you. Bomomo Browser Ball Bubbles
font dragr | Drag and drop font testing || Dummy Text Generator | Lorem ipsum for webdesigners ||