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

11. Morphix

Features: Space, sky, land, underground.

Description: Morphix also begins with some upper atmospheric action, but then transitions to land instead of sea, and finishes with an underground cutaway. The style is obviously different, but the illustration for each layer spans the width of the page, like the last one, creating a sense of horizon. And again, the transition from sky to underground flows smoothly, especially with the dynamic scrolling.

Upper atmosphere, with portfolio:

Ground level, with cows and skyscrapers:

Underground, with tree roots and groundhog:

12. GANDRWeb

Features: Various infographics.

Description: Unlike the previous two websites, this one uses infographics in place of characters, landscapes and backgrounds. Each section of the page explains the accompanying graphic. The bottom of the page features, unsurprisingly, a big web form. A purely sales-related website that uses so much good illustration is rare. The jQuery-triggered transitions add gloss to the message.

Infographic explaining benefits and pricing:

Infographic explaining the design process:

Web form:

13. Orman Clark

Features: Clouds, ground and flying objects

Description: Like the first two websites in this section, Orman Clark’s website begins with sky, but the tall page sticks with cloud sky all the way to the footer, where we hit the ground. A noticeable difference between this page and most of the others in this article is the fixed position of the main navigation and illustration. This is accentuated by the starburst at the top of the background that highlights the floating egg. The website also features a well-integrated jQuery slideshow for the portfolio.

Balloon, cow and egg:

Biplane and jQuery portfolio slideshow:

Web form, footer and fixed navigation:

14. Dreamerlines

Features: Various collages.

Description: The Dreamerlines site takes a discrete approach. Like GANDRweb, each section has a distinct graphic that is tied to its neighboring sections only by white space. Each section, though, is unique, detailed, colorful and attention-grabbing. Heavy illustrations, big bold text and background coloring set the tone.

Big text to begin:

In-your-face collage:

Web form surrounded by a lot of visuals:

15. Social Snack

Features: Wire, birds and ground.

Description: The sky motif never gets old, and designers can choose from any number of palettes to color their horizon. Social Snack’s horizon is a bit hazy, with a pronounced green and brown. Birds sit on wires that are scattered vertically throughout the page to separate sections. The website finishes with a rooftop. Although the blog doesn’t have smooth jQuery scrolling, the fun illustrated header with cute characters deserves mention.

The color palette and bird motif at the top:

The frames for the team photos hang off a bird wire:

Cute characters in the blog section:

Slideshow

One of the most frequent and recognizable uses of jQuery is for the venerable slideshow. Whenever you see content gliding across the screen after a mouse click, and no Flash can be found, it’s probably jQuery. You’ll find slideshows on corporate websites, landing pages, agency portfolios, e-commerce websites, everywhere. They are that ubiquitous. Below are a few examples of slideshows that come alive because of sharp illustrations.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

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

• Sent (0)
• New