Oct 06 2008

5

Mouse Ghost

A friend of mine was really impressed with a flash demo that creates a cursor that follows the mouse. It works by recording the mouse coordinates, after the mouse stops moving it plays back the mouse movement.

I took a few minutes to create the same effect using javascript. While my version doesn’t have an image cursor it would be trivial to add one. I also set options to specify the delay, offsets, size and color. Since the script is fairly simple I thought I would take sometime explaining how I wrote it using classes in Mootools and why.

When I develop in Mootools, the majority of the time I break my problems into classes. Many people have issues with the concept of classes in javascript because classes technically don’t exist. This has to do with the fact that Javascript doesn’t follow traditional languages in its object inheritance, it uses prototype inheritance. Classes in Mootools is a object factory that makes dealing with the prototype chain much easier. In addition, Mootools provides some very nice functionality to make classes even more powerful. Enough with the technical jargon and on to the tutorial.

The first thing I do is create a skeleton.

var MouseGhost = new Class({
 
		Implements : [Options],
 
		options : {
 
		},
 
      		initialize : function(options){
			this.setOptions(options);
		}
});

Class is provided within the Mootools framework. It accepts an object that it uses to extend the prototype chain. Mootools has a few special features, like Mutators. They let you effect the Class your creating to make code reuse easier. Here I am using a standard mutator, Implements. My class implements the Options Class. By doing so, it will now have a new method called ’setOptions’. This makes it easy to configure my objects when I initialize them with the ‘new’ keyword.
Continue reading “Mouse Ghost”

Tags: , ,


Sep 30 2008

1

Sliding Text Animation

All too often from clients and friends I get requests to add something 'flashy' to their site. I have found myself in the position way too many times arguing against flash, when in fact my audience doesn't care. I have resorted to the answer "Sure" just to please them. More often then not I just create the effect using javascript. The result being that they don't even know it isn't even flash.

This will be the first of many in a series of what I'll refer to as "I can't believe its not flash!" :D

Recently, I had a request to create a text animation when you rollover a particular piece of text. This effect would add each letter in one by one with a specified delay. I created a class called 'SlidingText' with Mootools.


First the CSS:
#slidingText {
        padding: 0 0 0 0;
	margin: 15px;
	font: 14px Arial;
	list-style-type: none;
	cursor: pointer;
	width: 200px;
}
 
#slidingText li {
       text-transform: uppercase;
       margin: 5px 10px;
       padding: 0 0 0 0;
}

The main thing to note about the css is the elements we are going to animate ( 'li's ) have a defined width. By doing this we remove any bouncing or any other weird effects when we manipulate the DOM.


The HTML:
<ul id="slidingText">
 <li>javascript</li>
 <li>mootools</li>
 <li>text effects</li>
 <li>sliding text</li>
 <li>this is not flash</li>
</ul>

Next the Javascript:

Make sure you have included mootools, and SlidingText.js (download link below).


window.addEvent('domready'), function(){
        $('slidingText').getElements('li').each(function(el){
              new SlidingText(el);
        });
});

The Effect: (rollover text below)
  • javascript
  • mootools
  • text effects
  • sliding text
  • this is not flash
[inline] [/inline]

Download SlidingText.js


Tags: , , ,


Sep 29 2008

9

Transitions for Mootools

Transitions provides image transition effects that until now have been limited to flash. Transitions uses css in a creative way to perform the effects. By creating a grid and offsetting the background images in each cell a multitude of effects can be achieved. This script pushes the limits of what a browser can do, and in doing so, it is not an ideal fit in all situations. Use with caution.

Currently, Transitions provides 4 different types of image transitions.

  • Disolve: Parts of the image randomly disappear.
  • Sweep: The picture is removed from a defined point in the picture, the effect spreads out in all directions from that point
  • Blinds: The picture is removed like a blind closing from a direction (left,right,top,bottom)
  • Gobble: Removes a row at a time moving left to right, and right to left zigzagging until the image is removed

Each effect has multiple options, including random. The class itself also provides the ability to randomize the effect.

I highly encourage you to play with the ‘animation option’ on the top of this blog to get a better idea of what each effect does. I strongly suggest that you do not turn on the fade option unless you have a very modern computer. The save button will save your settings in a cookie, and restore the effects to your liking the next time you visit this blog.

Click to Download Transitions for Mootools 1.2

Requires: Mootools Core, Assets

I will have a follow up post shortly that will provide documentation and examples.

Upcoming Features:

  • Standard Fade ( for completeness )
  • Randomize image rotation option
  • Add Events for better control and features
  • More Transitions!

Update:

View Demo

Tags: , ,