Today in this post, jsB@nk would like to present to you a list of 24 personal/business websites/blogs that using JavaScript jQuery framework to build wonderful JavaScript animations; combined with awesome, unique design layout, obviously these sites attract audience's attention. Please move to full-post section to view.

Or you can try more other JavaScript experiments and examples on jsB@nk:
- Great JavaScript Experiment Showcases on Chrome, Safari
- 10 Super Good JavaScript Experiments on Google Chrome
- Super Awesome and Amazing MooTools Site Examples
- 12 Awesome and Creative JavaScript Games you should try

• Demo
• Enlarge
• Reload
• New window

6. Best Before

Features: Screen positioning, navigation animation
Description: If websites could take jQuery steroids, this would be the Barry Bonds of the web. With all the dynamic visuals, this website could easily be mistaken for a Flash website. After careful inspection, though, you�ll find that the page is neither Flash nor complex from a programming standpoint. But the realization that not a trace of Flash exists will remain etched in your psyche.

The home menu:

More stuff in curly braces:

Sub-menu and portfolio:

Animation

Finding a website design for which DHTML was chosen to create the animation is always a surprise. The best part for me is that I can see it on my iPhone. I�m sure that�s not the main reason why the designers chose to ignore Flash and its animation-friendly tools. I don�t know how much they relied on jQuery to code their animations, but they had to have had sadistic tendencies of some kind to pull it off.

7. Tori�s Eye

Features: Origami birds flying horizontally.

Description: Who thinks to use origami on a Web page? And who thinks to use blue origami birds to represent tweets, rather than the standard blue illustration? And who thinks to animate tweets? The answer to these questions is, the creators of Tori�s Eye. Build a website with any one of those features and you�d have something completely original. For these creators, having all of these features wasn�t enough. They made the counter-intuitive decision to do all of the animation without Flash!

Origami Twitter birds flying across a landscape:

8. Bags

Features: Slideshow and footer animation with one-color icons.

Description: The use of jQuery here is most obvious when the slideshow is triggered by a click in the navigation area. The expansive white space, black type and matching icon illustrations make for a nice-looking website. But lo and behold, an animation in the footer hasn�t stopped working since your arrival. Right-click the solid black animations and you�ll discover the secret to the website�s long-running movie: Sprites and DHTML.

Home page with a lot of white space:

Big icons scattered throughout the slideshow content:

Footer animation runs continuously, regardless of where you are on the website:

9. Kidd 81

Features: Header animation traveling horizontally.

Description: The bright-colored winter-themed drawings here catch your attention immediately, and the design has continuity all the way down to the footer. Like some of these other websites that use jQuery to animate objects, the smooth-moving images seem indistinguishable from Flash at first glance. The icing on the cake, though, is the draggable �Wow! I can�t believe you can drag these� icons.

Home page header animations:

A footer with the same illustrated theme:

The store section has the same character and colors:

Vertical Scrolling

A few JavaScript tools are capable of triggering smooth scrolling between sections of a page. jQuery, of course, is more than capable of performing this effect, and at least a few of the websites in this section take that route. Dynamic scrolling is a nice effect, but combined with creative and detailed illustrations, the feature is but one part of the bigger picture.

10. Tomas Pojeta

Features: Sky, ocean, underwater.

Description: Like a few other websites in this section, Pojeta adopts a motif that goes from high altitude to below the surface. The top of the website is in outer space, with its highly detailed rocket and monkey. Scroll down and you�ll see aliens and balloons in the lower atmosphere. Further down is an Easter Island-looking piece of land in the middle of the water, which leads to an underwater view with a submarine. Each illustration fits, and the transitions are about as seamless as it gets.

Rocket and monkey in space:

Easter Island and toucan:

Submarine underwater:

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New