Designing of a website is a big task, you have to think lots of aspects to make a website more engaging and appealing to the visitors. When you start designing website, you’ll always think of adding some special effects to spice up a particular webpage.
For adding that extra spice in your recipe, JavaScript / Ajax effects comes into rescue. This is the only time where you can think to enhance your website’s interface so that the visitors of your website will remember.
JavaScript / Ajax Effects can be obtained by writing the script ourselves or you can use a pre-made script from JavaScript / Ajax. There are lot of web developers out there who developed pre-made script that are available freely to use.
But all of them are not very useful in modern web design, so I carefully handpicked some JavaScript / Ajax effects that are really awesome to use in web design. These are some cool effects which every web developer should know and keep in their toolbox for future web design.
So, have a look on SaveDelete’s compilation of 15 Best JavaScript / Ajax effects for modern web design every web developer should know.
Don’t forget to
subscribe to our RSS-feed and
follow us on Twitter for recent updates.
1) Image Menu : The Image Menu is a simple JavaScript work in which images are used to make a horizontal image menu. Simply hovering the link will show you the full image by expanding. Mostly work in every browser.
Demo / Download / Documentation
2) Drastic Map : DrasticMap is an Ajax-based component that displays data from MySQL in a Google map. You can configure according to your need and integrate on your website. There are lots of options to play with.
Demo / Download / Documentation
3) ImageFlow : ImageFlow is an unobtrusive and userfriendly JavaScript image gallery. It is an object-oriented script, that means you can create many instances of it on one website. You can also customize each instance differently.
Demo / Download / Documentation
4) Ajax IM : Ajax IM (“Ajax Instant Messenger”) is a browser-centric instant messaging framework. It uses AJAX to create a real-time (or near real-time) IM environment that can be used in conjunction with existing community and commercial software, or simply as a stand-alone product.
Demo / Download / Documentation
5) Jcrop : Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Demo / Download / Documentation
6) INSTANT.js : Instant.js allows you to add an instant picture effect (including tilt) to images on your webpages. It means you can add cool background images. tilt to any side and effects on your webpage.
Demo / Download / Documentation
7) GlassBox : GlassBox is a lightweight JavaScript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
Demo / Download / Documentation
8 ) Fancy Upload : Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.
Demo / Download / Documentation
9) Searchfield : SearchField is a simple lightweight, unobtrusive script that adds styling and behaviour to your search form fields. All you need to make SearchField work is a simple form field and 2 lines of code (links to css and js file) and you are ready to rock.
Demo / Download / Documentation
10) Maillist : Mailist is a PHP based subscription mailing list. A stylish interface, twinned with ajax, provides seamless additions with no page reloads. Mailist has customisable email headers and footers, back up options, download (txt or csv) and outbox.
11) Control.Tabs : Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.
Demo / Download / Documentation
12) Uni-Form : Uni-Form is an attempt to standardize form markup (xhtml) andcss, “modularize” it, so even people with only basic knowledge can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.
Demo / Download / Documentation
13) iCarousel : iCarousel is an open source (free) javascript tool for creating carousel like widgets.Rotating is a function that can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.
Demo / Download / Documentation
14) jQuery checkbox : It is simple jQuery plugin which is used to add some effects to checkboxes fields in forms. It supports inline and jQuery attached click events and work with radio buttons too. Dynamic skin changing is also there.
15) jQuery.biggerlink2 : It is a simple jQuery plugin to make really easy to enable the specified element/s to behave as a proxy for their first contained link. Uses additional css classes to provide the means for the specified element to visually reflect focus and hover states of it’s contained link/s.
Demo / Download / Documentation
If you also know, some cool JavaScript / Ajax effects to make web page interface more awesome, please be kind and share with our readers.






















Pingback: Tweets that mention 15 Best JavaScript / Ajax Effects For Modern Web Design -- Topsy.com
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design » Web Design
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: === popurls.com === popular today
nice list for web designing thanks man
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design : Popular Links : eConsultant
Pingback: web designing | Rodneyyasurek309's Blog
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design | Programming Blog Imagik.org
Pingback: web designing | Numbersdion911's Blog
Keep on the good work! Nice list for web designing!
webton webdesign´s last [type] ..iPad prijs- de iPad wordt met de dag populairder
Pingback: web designing | Royseley953's Blog
Pingback: web designing | Zackarybowser571's Blog
Pingback: web designing | Cedrickrigger266's Blog
Great Roundup. I especially like the Uni-Form one. I was disappointed with fancy upload as it appears to be Flash based.
Again, thanks.
Thanks Yogesh. I really like Drastic Map.. A very cool idea!
Aaron´s last [type] ..Free Blogs
Pingback: Gerrys Blog » Blog Archive » Why Great Web Design is So Important in a Successful Business
Pingback: web designing | Garlandgranberg962's Blog
Pingback: web designing | Givenchy 111 Perfume Blog
Yogesh,
Great list of tools here, many I did not know. Thanks for sharing!
Mark @ Biz Gadgets´s last [type] ..Tech Stocks Rise Modestly In Early Trading
Pingback: web designing | Carlhedlund889's Blog
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design
Pingback: web designing | Emilioburgdorf035's Blog
Pingback: web designing | Gilgardemal656's Blog
Pingback: Wedding Rubber Stamps | Art Rubber Stamps
I really like #1 on the list, that JavaScript Image Menu. The other tools look good to, I just need to look deeper into using them.
For DrasticMap a better demo link would be:
http://www.drasticdata.nl/DrasticTools/ExampleMapGrid2.php
It shows the same map, but interacting with the data in the grid.
i already use #10 in my blog.
hisam´s last [type] ..Play mp3 files on Symbian phones with Ultra Mp3
This is one hell of a post and it is so helpful for all kinds of web developers including newbies and professionals. Thumbs up! keep up the good work.
UmairP´s last [type] ..Frequently Asked Questions about Search Engine Optimization FAQ-SEO
Nice list for web design. Thanks
Hieu Martin´s last [type] ..Get Free Images For Your Blog
Pingback: Eric Blue’s Blog » Weekly Lifestream for July 11th
This is a nice collection for web designer, I am going to try some of them on my new website. I hope to get it right.
really cool, i like it, thank you
Nice collection thanks for sharing my friend.
Pavan Kumar´s last [type] ..Identifying the Latest SEO News
Pingback: 29 Best And Useful jQuery Plugins Of June 2010
Thanks Nice info
Pingback: 網站製作學習誌 » [Web] 連結分享
Usually I do not post on blogs, but I would like to say that this article really forced me to do so! Thanks, really nice article.
Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!
Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design | bojensen.eu
Pingback: 17 Best JavaScript Frameworks You Must Know
14. Nice day, I follow your weblog simply because it is very interesting to me and it gives me more understanding about some thing in which I didn’t notice within the end.
Dude..I love you Dude..
Pingback: kiss my coolest « glxdesign
Great posts, I agree with some other comments that there are some very invaluable tips for professional web designers and those new to the area!
Very great posts, thanks for sharing!