15 Best JavaScript / Ajax Effects For Modern Web Design

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.

You may be interested in the following related articles as well

Don’t forget to Subscribe to our RSS-feed subscribe to our RSS-feed and Follow us on Twitter 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.

Demo / Download


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.

Demo / Download


15) jQuery.biggerlink2It 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.

About Yogesh Mankani

is a Advertising Professional and running his own Advertising agency in Jaipur. Aside from his work, his other passion is blogging/writing. You can find him on Twitter & can connect with him on Facebook.
This entry was posted in Design and tagged . Bookmark the permalink.
You might want to subscribe to the RSS feed for updates. If you wish to subscribe here via Email, then kindly click here.

Connect with SD on FACEBOOK easily

45 Responses to 15 Best JavaScript / Ajax Effects For Modern Web Design

  1. Pingback: Tweets that mention 15 Best JavaScript / Ajax Effects For Modern Web Design -- Topsy.com

  2. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design » Web Design

  3. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  4. Pingback: === popurls.com === popular today

  5. Techpage says:

    nice list for web designing thanks man

  6. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design : Popular Links : eConsultant

  7. Pingback: web designing | Rodneyyasurek309's Blog

  8. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design | Programming Blog Imagik.org

  9. Pingback: web designing | Numbersdion911's Blog

  10. Keep on the good work! Nice list for web designing!
    webton webdesign´s last [type] ..iPad prijs- de iPad wordt met de dag populairder

  11. Pingback: web designing | Royseley953's Blog

  12. Pingback: web designing | Zackarybowser571's Blog

  13. Pingback: web designing | Cedrickrigger266's Blog

  14. Great Roundup. I especially like the Uni-Form one. I was disappointed with fancy upload as it appears to be Flash based.

    Again, thanks.

  15. Aaron says:

    Thanks Yogesh. I really like Drastic Map.. A very cool idea!
    Aaron´s last [type] ..Free Blogs

  16. Pingback: Gerrys Blog » Blog Archive » Why Great Web Design is So Important in a Successful Business

  17. Pingback: web designing | Garlandgranberg962's Blog

  18. Pingback: web designing | Givenchy 111 Perfume Blog

  19. 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

  20. Pingback: web designing | Carlhedlund889's Blog

  21. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design

  22. Pingback: web designing | Emilioburgdorf035's Blog

  23. Pingback: web designing | Gilgardemal656's Blog

  24. Pingback: Wedding Rubber Stamps | Art Rubber Stamps

  25. Mark says:

    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.

  26. dd says:

    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.

  27. hisam says:

    i already use #10 in my blog.
    hisam´s last [type] ..Play mp3 files on Symbian phones with Ultra Mp3

  28. UmairP says:

    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

  29. Nice list for web design. Thanks
    Hieu Martin´s last [type] ..Get Free Images For Your Blog

  30. Pingback: Eric Blue’s Blog » Weekly Lifestream for July 11th

  31. 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.

  32. yohan says:

    really cool, i like it, thank you :)

  33. Nice collection thanks for sharing my friend.
    Pavan Kumar´s last [type] ..Identifying the Latest SEO News

  34. Pingback: 29 Best And Useful jQuery Plugins Of June 2010

  35. wahyu24 says:

    Thanks Nice info

  36. Pingback: 網站製作學習誌 » [Web] 連結分享

  37. 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.

  38. 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!

  39. Pingback: 15 Best JavaScript / Ajax Effects For Modern Web Design | bojensen.eu

  40. Pingback: 17 Best JavaScript Frameworks You Must Know

  41. 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.

  42. Dude..I love you Dude..

  43. Pingback: kiss my coolest « glxdesign

  44. 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!

  45. Webdesign says:

    Very great posts, thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Subscribe without commenting