Archive for the ‘MooTools’ Category
Simple Animated Menu with Mootools

Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users – the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won’t even have to muck about in javascript.

Simply define:

  • a container for the background image
  • the nav elements
  • the ‘current’ nav element ID
  • the animation’s horizontal track (the y coordinate of the background-image)
  • the left offset of the image in relation to the nav element

Basically, you just tell the function where to put the background image you want to animate, what the buttons are and how to identify the current id, then position its x and y coordinates in relation to the elements. If you are new to javascript web development, and not sure what this all means, keep reading. It breaks down very simply.


Requirements: MooTools 1.2
License: Public Domain Certification

No Comments »
mRotate – A MooTools Plugin

mRotate is a plugin for MooTools framework. It is an adaptation from jQueryRotate.js whose its author, Pawel Witkowski, defines it like “[...] a final product of a Wilq32.PhotoEffect Snippet. Actually you can use this simple and tiny script to get effect of rotated images directly from client side (for ex. user generated content), and animate them using own functions.”



No Comments »
MooScroll – Scrollbar Effect

MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.

It gives the designer the ability to easily create their own scrollbar and implement them easily into their theme or interface.

Size does not matter when it comes to MooScroll. Whether you have barely enough content to scroll, or more than enough, it will work with your content and design to display your desired result.


Requirements: MooTools 1.2 Core, MooTools More (Slider, Scroll, and Drag plugins)
Compatibility: All A-grade browsers.


No Comments »
Your ads