MooTools TextOverlap Plugin

Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element to a website.

The XHTML

<h2 class="overlap">Look At My Header!  Isn't It Something?</h2>
<p class="overlap">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam et nisl. Aliquam justo justo, 
	posuere vel, blandit non, vulputate at, nisl. Nunc scelerisque pulvinar lectus.
</p>

Nothing special here. Just a page's content given an overlap class.

The CSS

.overlapper	{ color:#999; font-style:italic; z-index:-1; position:absolute; border-bottom:0; }
.overlapperp{ color:#666; z-index:-2; position:absolute; }

The above CSS code will be applied to the respective Moo-generated overlap element. You'll assign classes to the overlap when you create an instance of TextOverlap.

The MooTools JavaScript

var TextOverlap = new Class ({
	
	//implements
	Implements: [Options],
	
	//options
	options: {
		offsety: 1,
		offsetx: 1,
		elements: $$('h1'),
		container: $$('body')[0],
		overlapClass: ''
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//do the overlap
		this.overlap();
	},
	
	//overlap the previoius text
	overlap: function() {
		this.options.elements.each(function(el) { 
			
			//get original position
			var pos = el.getPosition();
			
			//create a new element
			var over = new Element(el.get('tag'),{ 
				'class': this.options.overlapClass, 
				'style':'left:' + (pos.x + this.options.offsetx) + 'px;top:' + (pos.y + this.options.offsety) + 'px;position:absolute;', 
				'text':el.get('html') 
			});
			over.inject($$('body')[0]);
		}, this);
	}
});

The class accepts the following options:

• offsety: y coordinate difference in the overlap
• offsetx: x coordinate difference in the overlap
• elements: collection of elements to apply the overlap to
• container: container in which to inject the overlap. Usually the BODY element.
• overlapClass: class to apply to the overlap element

Once the instance is created, the class creates a new element for each element in the collection, adds the respective class/style attributes, and positions the class at the specified offsets. Simple!

The Moo Usage

window.addEvent('domready', function() {
	/* header */
	var myOverlap = new TextOverlap({
		offsety: 3,
		offsetx: 2,
		elements: $$('h2.overlap'),
		overlapClass: 'overlapper'
	});
	/* text */
	var myOverlap2 = new TextOverlap({
		elements: $$('p.overlap'),
		overlapClass: 'overlapperp',
		offsetx: 1,
		offsety: 0 
	});
});

Two separate instances are used for creating effects on the header and the paragraph. Different options are given to each effect.

I would hate for someone to get too wild with this class. Use it sparingly but effectively.