10 Awesome Animation Using Jquery

Jquery is amazing! help web designer and web developers to create amazing website interface.  In this article, i will share some of the innovative use JQuery on the animation, website design elements. You will read about some interesting techniques, instructions and examples that show how to create a similar impact on your own Web sites 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.

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.

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.

4. blog

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.

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.

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.

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.

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.

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.

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.

Choosing The Right Color Scheme For Your Website

The color scheme you chose will probably be greatly influenced by your audience but it also depends on what meaning and emotions you want your website to be associated with. The meaning of certain colors will also vary depending on the country and culture. For example, the color red usually means passion and leadership for North American people, but it can mean mourning and grief in South Africa.

• White: pure, neutral, clean
• Black: classy, elegance, power, mystery
• Grey: humility, pessimism, balance, formality
• Red: passion, fire, strength, leadership, love
• Green: environment, wealth, youth, greed, creative
• Blue: peace, harmony, conservative, cold
• Purple: royalty, envy, spirituality, pride
• Orange: enthusiasm, energy, happiness
• Yellow: gold, joy, optimism, weakness, light
• Brown/Beige: Earth, natural, friendliness, rustic
• Pink: love, gratitude, health, joy, young

Needless to say you should do a lot of research before deciding on the color scheme you will use. Make sure you research existing websites in your niche but don’t forgot that sometimes thinking a little outside the box can be a good thing.

Online Tools

There’s a lot of web-based tools to help you chose the right color scheme, here are some of my favorites:

Colour Lovers

Adobe Kuler

Color Scheme Designer

Daily Color Scheme

Read more here++++++++++

10 jQuery Tutorials For Web development

Tutorials

1. Facebook like Autosuggestion

I received a lot of request from my readers that asked to me how to implement Autosuggestion search with jquery. I love facebook API it’s neat, so I had developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you have to change the database details.

View Demonstration

2. Coda Popup Bubbles

In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of.

View Demonstration

3. Creating a Dynamic Poll with jQuery and PHP

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

View Demonstration

4. Create an apple style menu and improve it via jQuery

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

View Demonstration

5. Tabbed Content using jQuery and WP_Query

WordPress provides a huge array of information about your blog and it’s content. Showing lots of this information can become space consuming. A great looking solution to this is tabbed content!

View Demonstration

6. Slide out and drawer effect

The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

View Demonstration

7. WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the Apple Startpage, and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that’s not enough for me, I want to be able to show and hide it at my pleasure as well. I’m gonna show you how!

View Demonstration

8. Image Fade Revisited

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.

View Demonstration

9. Photo Slider Tutorial

First we need to start off with some images. You’ll want these images to be thumbnails that also have a larger view available. In this tutorial I’m using a thumbnail size of 50×50 and a full view of 600×400. You can have any size for the “full view” but the thumbnails must all be the same size. We’ll start with 4 thumbnails.

View Demonstration

10. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

View Demonstration

LightGallery- Joomla Image Gallery Component

LightGallery 1.0, this is a simple light weight image gallery with lightbox slide show. From the admin side administrator can create category and add/upload photos.

Admin can create two types of views for client side, category list and image list view. If admin create a category and select image list view, it will display images in the current category. Image list view support lightbox slideshow effect.

Features:
* Administrator can add category and images from admin side.
* 2 type layout for client side,Category list and image list.
* Image resizing
* Lightbox Image slide show
* support SEF urls.

Category List view Demo

LightGallery Image view Demo

Download LightGallery v1.0 from here Download

Show Tweets on Web Pages with Ptwix

Ptwix is a PHP/AJAX web component to show tweets on web pages. With ptwix people can follow your twitter account directly in your site.

Features

Customizable themes

Choose form tree standard themes and customize it, change images and stylesheet is really easy.

Asynchronous update

On click on update button ptwix make asynchronous update of messages

Easy configuration

You can set options like dimension and timeline type directly from code.

Read more

OnlyWire: WordPress Social Bookmarking Plugin

OnlyWire syndicates your content and articles to the web’s top social networking sites with a single button click. Used by thousands of bloggers and publishers, OnlyWire simplifies the process of submitting your content to over 30 social networking sites at once — including Digg, Reddit, StumbleUpon, Twitter and many others.

When you download and activate the OnlyWire WordPress Plugin, a “Bookmark & Share” button will instantly appear underneath each of your blog posts. When you mouse-over the button, it will expand to provide you and your readers an easy way to share your post with dozens of social networks.

Here’s the magic part – When you create a free OnlyWire account and set up your social networking site logins, OnlyWire will submit your post to all of the sites simultaneously. OnlyWire does all of the submission behind the scenes on behalf of you. When your readers use OnlyWire, they can also auto-submit to all of their networking sites. Sign up for a free account at https://onlywire.com/signup.

Read More++

Advanced Joomla Social Bookmarking Plugin

Advanced Social Bookmarker is a small joomla plugin services to your articles with AddThis.com technology, it records every click from your readers. You can view your site statistics to see what’s being shared & where.

Quickly & easily add social bookmarking buttons in 3 separate places in each article.

*Top right corner of an article:
Digg this badge, Retweet badge, Yahoo! buzz up badge

*Individual buttons after an article (footer):
Display individual buttons for the social networking sites of your choice (Over 170 popular sites to choose from).

*AddThis.com popup window (footer)
To the right of your individual site buttons is a ‘More…’ popup window that lists over 170 social bookmarking options for your readers.

This plugin is easy to install & configure, & makes it easy for your visitors to submit articles & build traffic to your site.

Plugin Options:
Show/Hide top right Digg this badge
Show/Hide top right Retweet this badge
Show/Hide top right Yahoo! Buzz this badge
Include any text/HTML above the footer buttons
Include any text/HTML below the footer buttons
Easily add your AddThis.com username to track your site statistics
Easily rename the ‘More…’ button
Easily add your twitter username
Easily add/arrange individual social site buttons before

Demo: http://www.prova.fm/advertising/index.php?option=com_content&view=article&id=30:can-your-business-improve-from-crowdsourcing&catid=8:category-advertising-help&Itemid=30

Download Link: http://www.prova.fm/tools/prova_advanced_social_bookmarker.zip