7 MooTools Plugins You Should Use on Every Website II

By  on  

The advantage of using unobtrusive JavaScript is that you can vastly improve the user experience for website visitors using just a snippet of code. And since the MooTools JavaScript framework's community is known for creating unique, quality plugins, I've compiled a list of plugins you MUST use on every website to take the user experience to the next level.

ScrollSpy

ScrollSpy

ScrollSpy is an invaluable tool which listens to the scroll event on any element within the page, allows you to create "virtual zones" to spy on, and allow you to fire specified functionality when the user's browser enter or leaves the zone.  I've used ScrollSpy on my website for years and will continue to do so.  This compact plugin can have a big impact on your website!

LazyLoad

LazyLoad is another plugin that's small in size but big in the fight for cutting down load time.  LazyLoad defers the loading of images until the user scrolls within a specified number of pixels of the image.  What make the user download images they might never get to the piece of the page that contains them?

SlideShow

SlideShow

SlideShow is the amazing slideshow widget created by MooTools contributor Ryan Florence.  SlideShow is extendable, flexible, and easy to implement.  SlideShow allows for more than just images too -- any number of elements can added to SlideShow.  The masterful plugin also contains built-in transition types so most of the animation is done for you!

Asset

Asset is a MooTools More class that allows you to dynamically request stylesheets, images, and JavaScript files asynchronously after the page has been loaded.  With Asset you can preload images, switch themes via CSS file swapping, and lazy load JavaScript plugins on demand

TextboxList

TextboxList

TextboxList by Guillermo Rauch is an outstanding plugin for beautifying text INPUT elements which contain comma-separated values.  TextboxList was inspired by Facebook and perfected using the MooTools framework.  TextboxList is also available for jQuery.

Zoomer

Zoomer

Zoomer is a refreshing take on image magnification.  Instead of the lightbox which has grown to be tiresome, Zoomer magnifies portions of an image within the original image's same dimensions.  You can focus on different portions of an image by moving your mouse around.

Mobile

Created by MooTools Core Developer Christoph Pojer, Mobile is a MooTools set of JavaScript files to enhance your website on mobile operating systems by automatically replacing all your click handlers with touch listeners to overcome the click delay on iOS.  A huge step in getting your website mobile-ready!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    RealTime Stock Quotes with MooTools Request.Stocks and YQL

    It goes without saying but MooTools' inheritance pattern allows for creation of small, simple classes that possess immense power.  One example of that power is a class that inherits from Request, Request.JSON, and Request.JSONP:  Request.Stocks.  Created by Enrique Erne, this great MooTools class acts as...

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

Discussion

  1. EmEhRKay

    Thanks, I was just about to start looking into some lazyloading techniques

  2. Hey, can you write a similar round up of tools for JQuery??

  3. Mootools Plugins. Plugins?

  4. I use “plugins” and “classes” interchangeably with MooTools.

  5. David, about Lazy Load… Maybe all images with same src must show after first one loaded?

  6. Good idea, although that would be extra processing for every image load.

  7. Florencia

    Great stuff, liked scroll spy! Also I agree with Brian…Something similar for JQuery will be usefull too.

  8. Great resources – should be very useful thank you! I also like your fading navbar at the top of the page – helpful and quiet

  9. Thanks for this set.

    David, you mixed links “Download” and “Documentation” in Asset

  10. Armando

    Hey Matt… When you were at Monterrey?, Did you liked it? I’m from there ^^

  11. Armando

    Ups.. I don’t know why I wrote Matt instead of David (Matt is my DBA and I’m on IM right now xD)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!