Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Mouse Tail Plugin
(function() {
var mouseEffects = new function() {
var tiles = [];
var body = document.getElementsByTagName('body')[0];
this.init = function(config) {
var split;
if (config.text) {
split = config.text.split('');
console.log('split: ', split);
}
var container = document.createElement('div');
container.id = 'mt_tiles_container';
container.style.fontSize = '18px';
for (var i = 0; i < config.max; i++) {
var tile = document.createElement('div');
tile.id = 'mt_tile_' + i;
tile.style.width = config.width + 'px';
tile.style.height = config.height + 'px';
if (config.blink) {
tile.style.color = this.randColor();
} else {
tile.style.backgroundColor = this.randColor();
}
tile.style.position = 'absolute';
tile.style.zIndex = 2000;
if (split) {
if (split.length === 1) {
// Should repeat the same char across all the elements in the trail
this.setText(tile, split[0]);
} else if (split.length < config.max) {
var txt = split[i];
if (txt) {
this.setText(tile, txt);
} else {
break;
}
}
}
tiles.push(tile);
// insertFirstChild
container.insertBefore(tile, container.firstChild);
}
if (tiles && tiles.length) {
// insertLastChild
body.appendChild(container);
this.bindMouseMove(config);
}
};
this.randColor = function() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
};
this.fixPageXY = function(e) {
e = e || window.event;
// This should only run for IE<9
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement;
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
}
};
this.bindMouseMove = function(config) {
var namespace = this;
var move = function(tile, x, y, interval) {
setTimeout(function() {
tile.style.left = x + 'px';
tile.style.top = y + 'px';
if (config.blink) {
tile.style.color = namespace.randColor();
} else {
tile.style.backgroundColor = namespace.randColor();
}
}, interval);
};
var handler = function(e) {
// Fix for older IE
namespace.fixPageXY(e);
for (var i = 0, l = tiles.length; i < l; i++) {
var tileInterval = config.interval + (config.step * i);
move(tiles[i], e.pageX, e.pageY, tileInterval);
}
}
this.bindEvent(window, 'mousemove', handler);
};
this.bindEvent = function(node, e, handler) {
if (node.addEventListener) {
node.addEventListener(e, handler, false);
} else if (node.attachEvent) {
node.attachEvent('on' + e, handler);
}
};
this.setText = function(node, text) {
node.innerText = node.textContent = text;
};
};
// Bind to a clickzone with the href of #mouseEffects
var clickzones = document.getElementsByTagName('area');
for (var i = 0, l = clickzones.length; i < l; i++) {
var cz = clickzones[i];
var href = cz.getAttribute('href');
if (href === '#mouseEffects') {
mouseEffects.bindEvent(cz, 'click', function(e) {
e.preventDefault();
/****** Configure the action here ******/
mouseEffects.init({
max: 100,
width: 20,
height: 20,
interval: 180,
step: 50,
text: 'Personalize now',
blink: true
});
/***************************************/
});
}
}
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment