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.
run script 1 | run script 2
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
run script
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:
run script
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
fade in | fade out | toggle fade | fade to 0.5
|
highlight | highlight red
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();
});