Morphing Elements Using MooTools and CSS

Written by David Walsh on Tuesday, April 22, 2008

Morphing an element between CSS classes is another great trick the MooTools javascript library enables you to do. Morphing isn’t the most practical use of MooTools, but it’s still a trick at your disposal.

Step 1: The XHTML

<a href="javascript:;" class="switch-view" rel="view1">View 1</a> |
<a href="javascript:;" class="switch-view" rel="view2">View 2</a> |
<a href="javascript:;" class="switch-view" rel="view3">View 3</a>
<br /><br />

<div class="view1" id="content-block">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit
	egestas nunc. Nam scelerisque neque a nibh. Proin tincidunt. Suspendisse
	facilisis, lorem et venenatis consectetuer, augue justo molestie lacus, id
	consectetuer ligula nibh a tellus.
</div>

The block of content that will change is the content-block DIV. Each link above the DIV will control which morph the DIV will undergo. Notice that each link is given the switch-view class so that they can be selected as an array by MooTools. Each link also has a rel attribute that contains the CSS class that the content-block DIV should morph into.

Step 2: The CSS

.view1		{ border:2px solid #ffcc00; color:#000000; background:#fffea1; padding:5px; letter-spacing:3px; line-height:19px; font-family:tahoma; font-size:10px; }
.view2		{ border:9px dashed #0000ff; color:#009900; background:#fcfa56; padding:12px; letter-spacing:1px; line-height:22px; font-family:verdana; font-size:14px; }
.view3		{ border:5px solid #000000; color:#ffffff; background:#ff0000; padding:10px; letter-spacing:8px; line-height:25px; font-family:times; font-size:12px; }

I’ve defined three CSS classes with the same properties defined. If you fail to define the same properties in each class, you risk allowing the previous class’ properties to stay during the morphing process.

Step 3: The MooTools Javascript

//window on dom ready
window.addEvent('domready', function() {
	//for every switch-view link
	$$('.switch-view').each(function(el) {
		//add click event
		el.addEvent('click', function(e) {
			//nowhere
			e.stop();
			//morph baby!
			myFx = new Fx.Morph('content-block', {duration: 500, transition: Fx.Transitions.Sine.easeOut}).start('.' + el.get('rel'));
		});
	});
});

Once the DOM is ready, we use grab every link with the switch-view class. When any of these links are clicked on, the link’s rel attribute is morphed into.

Follow via RSS Epic Discussion

July 01 / #

Andy says:

Just found this out which had me stumped for a while. When you tell it to morph to a class, you have to point it to the entire rule. So if you have have in your css
“.a .b {rule}”
you have to do
el.morph(…,).start(‘.a .b’); instead of just .start(‘.b’), even if your element already matches the CSS selector.

November 12 / #

luca bertini says:

why not working?
I load the contents with a switch in php
how i must to write javascript function?

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

Feeds & Profiles

Sponsors

Tutorials & Topics

Script & Style Tweets