10 Important examples of Animation with jQuery

jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API.
In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps.

1. Puffing Smoke Effect in jQuery

This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Kessler thoughtfully supplies a configurable jQuery plugin with instructions based on his site’s header, so that you may create a similar animation effect for your website.
Live Demo: Smoke Effect

2. Crafting an Animated Postcard

Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. The tutorial takes advantage of the popular jQuery Easing plugin to help with the animation and the setTimeout() JavaScript function to time the events accordingly.
Live Demo: Animated Postcard

3. Create a Realistic Hover Effect

In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. The tutorial features objects that, when hovered on, rises upwards. In the live demo of the effect, notice how the reflections and shadows at the bottom also changes when the object lifts up; hence "realistic" in the name of the technique.
Live Demo: Realistic Hover Effect

4. Scrolling Background Effect

The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. The script is also dependent on the user’s system time; the animation starts at a different position depending on whether you visit the site at night or in the morning, a nice touch.
Live Demo: youlove.us (web page header)

5. Multiple Animations with Glimmer

Glimmer, a JavaScript animation creation tool that leverages the jQuery library, has several live demonstrations for some of the things you can do with the app. For instance, with Glimmer, you can create cool animation sequences or make a spiffy and impressive rotating banner for your website.
Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample

6. jQuery Blend

jQuery Blend is a plugin for animating CSS background images. The project emphasizes on web development best practices such as progressive enhancement  so that users with JavaScript disabled are still able to interact with your interface, albeit without the animation effects, making for a truly universal design.
Live Demo: website navigation with different options

7. Parallax Scrolling Background

In this jQuery tutorial, you will learn how to construct a Parallax Scrolling background – first popularized in web interfaces with the use of Flash. The technique involves div elements with CSS background images. The Parallax Scrolling technique requires the scrollTo plugin by Argentinean Web Developer and Game Programmer, Ariel Flesler.
Live Demo: Scrolling Clouds

8. Stunning Sliding Door Effect

Designer and Developer Kevin Liew shows other website builders how to create a striking animation effect where a top image splits up into four pieces, moving smoothly to the corners, and revealing another image beneath it. It’s an animation effect suited for interactive thumbnails of images.
Live Demo: Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.
Live Demo: parallax

10. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.us example of vertically moving a large CSS background image. Illustrations on how the technique works will help readers grok the concept more fully. Devirtuoso, the author of the tutorial, goes through due diligence by offering an IE6 hack for backwards compatibility.
Live Demo: Animated Header
Can jQuery replace Flash? Do you know of other impressive uses of jQuery to animate page elements? Why don’t we talk about it in the comments? *Co-written by Jacob Gube

Four Aspects of a Usable Modern Web Interface

15 years ago, the web didn’t look the way that it does now. The web was dull, unattractive and less visually appealing. Interacting with web pages was not possible, and the web was simply a static information space.
Well, a lot’s changed since then. Today’s modern trends on the web are sophisticated, alluring and engaging. Building interactive and amazing interfaces using Flash/Flex or Silverlight has become easier and more accessible to modern-day designers.
It’s easy to get caught up in the creative concepts of modern web designers. Just peeking at The FWA, a popular design gallery for Flash/interactive websites, will give you a glimpse of the creativity and character of the interfaces that today’s designers build. Their concepts are out of this world, and it’s only going to get better.
But where does that leave universal design? And usability? Do they have to sacrifice these important factors in order to provide their users an out-of-this-world experience?
In this article, I’d like to highlight four aspects of usable designs in today’s modern web – the things that you should keep in mind when working on your design projects.

1. The visual design

Remarkable designs are very creative and push towards the extreme limits of conventional (e.g. safe) designs. They’re distinguished, and they make memorable positive impressions on the people that see them.
But how much is too much?
Keeping your visual design simple yet memorable is a challenge, but a challenge that you must be able to negotiate when it comes to creating usable designs.
To improve the aesthetics of your interface, use white space to visually organize the page. Grouping related design elements and separating distinct elements can aid users in quickly finding the set of information they’re interested in.
The graphics you use should be able to illustrate, inform and aid the readers. Visual clutter should be avoided, and every visual element on your interface should serve a purpose.
In the following example, you can see how Bigo & Twigetti arranges visual elements by spacing them out and making them purposeful as visual cues as to what the website is about.

2. Dynamic feedback

Do you ever get bored of the standard static site feedback (the ones that appear after you’ve filled out your web form, for example)?  I do.
Today’s web interfaces are evolving in such a way that you don’t know what to expect when you get to a website. I like the experience where my actions provide a unique response. Appropriate and dynamic feedback gives users an immersive and interesting user experience.
Over at Sergey Tyukanvo’s online gallery, feedback is based on the real world. Users will be more likely to relate to your website if physical analogies and cultural standards are utilized.

3. Information architecture

If a user can’t find what he/she wants in as few clicks as possible, they’ll leave. Use metaphors that are easy to identify with. Navigation should come naturally to the user. Controls should be highly visible.
It should be obvious to the user what his/her actions should be on your website, making retrieving information a smooth process. Check out the Coca-Cola site: it’s arranged in a manner that makes it easy to find the information you likely want to know.

4. Constraints

By definition, constraints mean restricting possible actions that can be performed. Another way of looking at it is giving users more control over possible actions that can be performed; a classic half-empty versus half-full glass scenario. That way, they feel like they’ve achieved something.
John Ruppel’s portfolio is a unique example. The options menu allows users to filter between interface styles, backgrounds and categories in a totally efficient manner. Users are, thus, motivated to learn more about these various options they have control over.

25 Rounded Corners Techniques with CSS

Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.

Techniques

ThrashBox – create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup.

Even More Rounded Corners With CSS – nice technique with fluid rounded corner dialogs and support for borders, alpha transparency throughout, gradients and patterns.

DomCorners – a very simple technique for getting rounded corners.

virtuelvis.com Rounded corners in CSS – allow you to retrofit this to existing designs without altering any markup.

Transparent custom corners and borders version 2 – a technique for creating custom corners and borders with optional alpha transparency.

CSS Teaser Box with rounded corners – by Roger Johansson, the same author of Transparent custom corners and borders version 2.

News List – was designed to display links to recent news.

CSS Liquid Round Corners – a re-usable rounded box, note that it needs total 6 images for wrap the corners.

Anti-aliased Nifty Corners – based on Nifty Corners and modified by Steven Wittens.

Simple Box by tedd – another simple rounded corners.

CSS and round corners making accessible menu tabs – decent rounded corners style menu tabs technique.

CSS and round corners borders with curves – make a rounded corners borders with curves.

Airtight Corners – produce a box with rounded corners using only one image, and off-setting that image for each corner.

Mountaintop Corners – easier way for creating decent rounded corners.

Editsite Rounded Corners – need a javascript to create the corners.

Create a rounded block or design with CSS and XHTML – easily create a rounded block.

Resizable box with freely stylable corners and surface – re sizable rounded corners box.

Smart Round Corners – a practical solution to uses small images for markup the corners.

Lean and Clean CSS boxes – need 2 images to wrap the header and box.

Broader Border Corners – a quick and easy recipe for turning those single-pixel borders.

Snazzy Borders – based on Nifty Corners By Alessandro Fulciniti

Rounded corners in CSS by Adam Kalsey – requires 4 corners images.

curvyCorners – a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.

Nifty Corners – a solution based on CSS and Javascript to get rounded corners.

quinncrowley.com – based upon a combination of pixy and Kalsey

Rounded Corners Generators

Online rounded corners generators, Rocks!
http://www.roundedcornr.com/ – the herald of rounded corners generator tool.

http://www.spiffycorners.com/ – simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript.

http://tools.sitepoint.com/spanky/ – an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup.

http://spiffybox.com/ – another project by the owner of Spiffy Corners.

15 Ways To Create Website Screenshots

Taking screenshots of web sites is probably one of the most commonly done tasks on the internet – doubly so if you have a blog or work as a journalist. This week, we wrote about Thumbalizr, a service that lets you take screenshots of websites. However, there are several other tools for easy screenshot capturing – some standalone and some in the form of a browser plugin.
Plugins

Save as image – an aptly named Firefox () plugin that lets you save a page, frame, or part of either as an image directly from Firefox.
Pearl Crescent Page Saver – Save images of web pages in jpg or png format; save the entire page or just a portion of it, with the ability to automatically scale the image to a smaller size.
Picnik for Firefox – if you use online image editor Picnik () this Firefox plugin enables you to easily import a screenshot of the currently opened webpage into it.
Snissa – simple Firefox plugin for taking web page screenshots.
Screengrab! – a plugin that lets you save visible part of window, the entire page, just a selection, or a particular frame of a webpage.
ieSnapshotter – a shareware plugin for Internet Explorer () that allows you to take screenshots and thumbnails of web pages.
Standalone programs

SnagIt () – definitely one of the best programs for screenshot capturing, with all the options you might need. Integrates with Firefox, can replace the standard Windows print screen function, and enables you to create profiles for various types of use. Costs 39.95 bucks, but you can try out a free trial version before buying.
FastStone Capture – a powerful utility for taking screenshots with a floating control panel as well as the ability to capture anything on the screen including windows, objects, full screen, rectangle regions, and even freehand-selected regions.
WebShot – a program that allows you to take screenshots and thumbnails of web pages or whole websites. Its main advantage is its powerful command line utility which enables you to automate the process of taking screenshots.
Paparazzi! – a tiny application for Mac OS X that lets you take screenshots of web pages.
PrintKey – replaces your print screen function with a better one with more features. There’s a commercial version but you can also find an older, unsupported, freeware version on the provided link.
I4X Screencatcher – take screenshots of the active window, entire screen, or the selected area with this tool.
InstantShot – an advanced but freeware application for Mac OS X that sits in your menu bar and gives you a myriad of screen capturing options, including capturing a region, hotkeys, several output formats, image scaling and many others.
Web based

WebShotsPro – enter a URL address and get a screenshot of the website in question. Simple. You might encounter quite a long queue before getting your screenshot, though.
Thumbalizr – already mentioned in a recent article, Thumbalizr lets you create screenshots of websites by pasting their URL; the only problem is that it doesn’t always work.