MooTools TextOverlap Plugin

By  on  

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.

Recent Features

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Discussion

  1. It does not look good if words don’t wrap the same. I could see it working to give a pseudo drop shadow effect. Maybe nicer to have the shadow fade-out or fly off to just draw attention.

  2. Hey, interesting. Just reminds me of the css text-shadow property. I would say you’ve provided us with a fresh cross-browser compatible solution here. Is there anything like a blur effect (not the event) in mootools to complete this text-shadow simulation?

  3. @kermalicious: I don’t think a blur effect is possible with javascript. Maybe PHP though.

  4. Nate

    Depending on the type of blur you want, you could get a blur effect by stacking layers that fade to the background color with very small offsets between the layers. If you go in a single direction it would provide a motion blur effect. If you were to circle the characters with layers a small gaussian blur would appear. The effects would have to be really subtle, and would be nowhere close to as effective as an actual blur filter.

    You could also jiggle the background text a little to give an effect that the user cannot focus. This will cause their eyes to blur the text while trying to get it into focus.

    None of this stuff should really be used anywhere though, unless you are trying to design a “cool” myspace page.

  5. @david: I found this script to generate blur on the fly with js :

    http://www.webveteran.com/portfolio/demos/javascript-blur/

    Sadely, it isn’t based on Mootools. If anyone has the same but base on Mootools, I’m really interested.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!