A MooTools Demo thingy (and some Fx)

I’ve spent quite a bit of time recently working on changes to the MooTools documentation. Now I have a blog up I wanted to write some demos but didn’t want it to be one long article; I wanted to break the article into sections.

So I made this little demo thingy and thought I’d see what people thought of it.

How it works

First off I separate each ’slide’ with a <div class=”section”>. I’m also using <pre> tags and the excellent Lighter.js for code highlighting.

I then have a small class that lets you navigate through the ’slides’. Each time a slide is shown, the HTML, CSS and JavaScript are injected into an iframe (which I called a ’stage’) and you can show the stage by adding a class of ’showstage’ to the section.

The code is really messy at the moment but it is more of a proof-of-concept than a finished class. I’ll definitely clean it up, and I may in time make it into a WordPress plugin – I’d also love it to be easily used with MooShell.

Anyway, have a play and tell me what you think!

A demo of the demo thingy

Really simple animations with .tween() and .morph()

MooTools effects are really powerful and really easy to use. The easiest way to do basic animations is using the Fx.Tween and Fx.Morph element methods.

Let’s start off with a couple of simple boxes:

HTML

CSS

.box {
	height: 100px;
	position: absolute;
	width: 100px;
}
#box1 {
	background-color: #222;
	border: 1px solid #ccc;
	left: 20px;
	top: 40px;
}
#box2 {
	background-color: #94CC25;
	border: 1px solid #222;
	left: 450px;
	top: -3px;
}

Changing a single property

If you want to just change a single property of an element, like change a background colour or fade an element out, you can use a tween.

JavaScript

$('runscript1').addEvent('click', function(e){
	e.stop();
	$('box1').tween('background-color', '#f00');
	$('box2').tween('opacity', 0.7);
});

$('runscript2').addEvent('click', function(e){
	e.stop();
	$('box1').tween('top', 50);
	$('box2').tween('left', 300);
});

Use .morph() to change more than one property

JavaScript

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	});
	$('box2').morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

Chaining

If you want to chain a series of effects, the Fx.Morph class has an option called ‘link’. You can set it to ‘chain’ (as well as some other options) like so:

JavaScript

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').set('morph', {
		duration: 'long',
		link: 'chain',
		transition: 'bounce:out'
	});
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	}).morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

.fade() and .highlight() – handy helpers

JavaScript

$('fadein').addEvent('click', function(){
	$('box1').fade('in');
});
$('fadeout').addEvent('click', function(){
	$('box1').fade('out');
});
$('fadetoggle').addEvent('click', function(){
	$('box1').fade('toggle');
});
$('fadehalf').addEvent('click', function(){
	$('box1').fade(0.5);
});

$('highlight').addEvent('click', function(){
	$('box2').highlight();
});
$('highlightred').addEvent('click', function(){
	$('box2').highlight('#ff0000');
});
$$('A').addEvent('click', function(e){
	e.stop();
});

Find out more

About this entry

You’re currently reading “A MooTools Demo thingy (and some Fx),” an entry on fakedarren

Published:
11.2.09 / 12am
Category:
JavaScript, MooTools
Tags: