11 Ways to Enhance a User Interface with MooTools

By / Feb 6, 2009 / Tutorials
shares

When creating a User Interface, it’s important to make it engaging for the user not only from a visual standpoint, but also with interactivity. With so many JavaScript frameworks readily available, web designers and developers have many tools at their disposal to add slick effects to their UI’s.

Last week, I showed you what could be done with jQuery. Now let’s take a look at these 11 tutorials and see what kinds of things MooTools can do for a User Interface. If you are not familiar with MooTools, it is a popular JavaScript framework designed for the intermediate to advanced JavaScript developer.

FancyUpload

FancyUpload

Facebook Sliders With Mootools and CSS

Facebook Sliders With Mootools and CSS

Mootools Content Slider With Intervals

Mootools Content Slider With Intervals

Jazz Up Your Forms With MooTools Pt. 1

Jazz Up Your Forms With MooTools Pt. 1

Using CSS and Mootools to simulate Flash horizontal navigation effect

Using CSS and Mootools to simulate Flash horizontal navigation effect

Two CSS vertical menu with show/hide effects

Two CSS vertical menu with show/hide effects

How to Auto Caption Images Using MooTools

How to Auto Caption Images Using MooTools

Elegant animated weekly timeline for websites

Elegant animated weekly timeline for websites

MooTools Gone Wild: Element Flashing

MooTools Gone Wild: Element Flashing

Add a Show/Hide Login Panel

Add a Show/Hide Login Panel

Mootools Link Animation

Mootools Link Animation

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

23 Comments

  1. Umut Muhaddisoglu
    February 6, 2009

    @Henry,

    Very nice ones. Thanks.

    It is also great to see there are more & more MooTools tutorials everyday.

    Reply
  2. Patternhead
    February 6, 2009

    Nice list but it’s jquery all the way for me.

    Reply
  3. Niki Brown | The Design O’Blog
    February 6, 2009

    It amazes me what javascript libraries allow you to do….and how EASY they make it!

    Thanks Henry!

    Reply
  4. Webdesigner Depot
    February 6, 2009

    The fancy upload is especially helpful since it keeps the user watching the upload rate while they upload their file, rather than clicking off to something else. Great list!

    Reply
  5. Chikezie Ejiasi
    February 6, 2009

    I sold my soul to mootools. :)

    Reply
  6. Geno
    February 6, 2009

    Thanks for sharing!

    Reply
  7. Timothy
    February 6, 2009

    Nice list! I love all things MooTools.

    I’ve been using MooTools for a while now (used to use prototype) and I think that a lot of jQuery followers do not realize that MooTools offers similar features. And this list only offers a glimpse of what you can do with MooTools.

    Reply
  8. Pliggs
    February 6, 2009

    I love jQuery for reasons like ones in this post.

    Reply
  9. Nokadota
    February 6, 2009

    I love the MooTools library, thanks for the excellent links.

    Reply
  10. walter
    February 7, 2009

    I love jquery too. There are more documentation and examples

    Reply
  11. Casey L. Jones
    February 10, 2009

    I love this effect from NETTuts: http://nettuts.com/tutorials/javascript-ajax/create-a-simple-powerful-product-highlighter-with-mootools/

    I’m using it in a client’s site now to display her current novels.

    Reply
  12. Antonio Lupetti
    February 12, 2009

    Thanks for the mention :)

    Reply
  13. Ben
    February 14, 2009

    MooTools totally rocks!

    Reply
  14. Rahul
    February 15, 2009

    Cool one. I always like the “woork” tutorials. Thanks for sharing this one.

    Reply
  15. Sebastian
    February 17, 2009

    Hey Henry,

    this collection is brilliant and until now I haven’t even considered using mootools, but now I’ll definitely give it a try! It will come in really handy, while I’m working on my first website!

    Thank you very much – and enjoy your life :)

    Reply
  16. topher knowles
    February 18, 2009

    this site just keeps getting better!

    Reply
  17. Csaba
    July 8, 2009

    FancyUpload is my favorite. Very nice design and great functionality

    Reply
  18. Netfloat
    July 10, 2009

    Unfortunately i’m a jQuery Lover :p

    Reply
  19. Avery
    July 16, 2009

    MooTools totally rocks!

    Reply
  20. face finance
    July 16, 2009

    Cool one. I always like the “woork” tutorials. Thanks for sharing this one.

    Reply
  21. 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger
    August 21, 2009

    [...] I believe the navigation of a website should always be simple. However, if a website has many pages and sub pages, the thought of navigation simplicity goes out the window. This is where drop down menus come into play. A good and well executed drop down menu can make navigating a large site easy for the user. While drop downs make site navigation easy, sometimes they can seem difficult to implement, but the solutions listed below are all a breeze to set up, especially since most of them are built on jQuery or MooTools. [...]

    Reply
  22. Web Developer Bangladesh
    October 14, 2009

    WOW!!!! Its amazing… thanks a lot…

    Reply
  23. Web Dizajn Bosna
    December 12, 2010

    Great! Thx.

    Reply

Leave a Reply