/*
Codebox Bouncing Message Script
-------------------------------
To use this just call the 'CODEBOX.bounceMsg.go' function passing the following parameters:
* word - a string containing the word that you want to display
* container - a
that will contain the animation
* config - [optional] an object containing configuration data, if no object is
supplied, or if certain parameters are omitted, then default values will be
used. The available parameters are:
delay - milliseconds between each letter being released
spacing - horizontal spacing in pixels between each letter of the word
g - gravity, higher values make the letters drop faster
timeDelta - fractions of a second between screen updates, smaller values give smoother motion
bounceFactor - how much the velocity changes at each bounce, 0.5 means it halfs each time
bounceDecrement - amount subtracted from the velocity at each bounce, used to make sure the bouncing actually stops
Examples:
CODEBOX.bounceMsg.go('example 1', document.getElementById('someDiv'));
CODEBOX.bounceMsg.go('example 2', document.getElementById('someDiv'), {'delay' : 200, 'g' : 100});
For latest version go to:
http://codebox.org.uk/pages/javascript/bouncing-message
For licensing information go to:
http://codebox.org.uk/pages/about
*/
if (CODEBOX===undefined){
var CODEBOX = {};
}
CODEBOX.bounceMsg = {};
CODEBOX.bounceMsg.letterObjects = [];
CODEBOX.bounceMsg.container = null;
CODEBOX.bounceMsg.go = function (word, parent, config){
// Fill in any missing properties in the config object
config = checkConfig(config);
CODEBOX.bounceMsg.container = parent;
// Populate an array with objects representing each of the letters in the word
for(var x=0; x= CODEBOX.bounceMsg.letterObjects.length){
clearInterval(t);
} else {
CODEBOX.bounceMsg.letterObjects[i++].start();
}
}, config.delay);
function checkConfig(config){
// Make sure all the properties of the config object have values, filling in
// any blanks using defaults
var DEFAULT_CONFIG = {
'delay' : 100,
'spacing' : 10,
'g' : 250,
'timeDelta' : 0.01,
'bounceFactor' : 0.7,
'bounceDecrement' : 5
}
if (!config){
config = {};
}
for (var p in DEFAULT_CONFIG){
// Only use a default if there is no value there already
if (!config[p]){
config[p] = DEFAULT_CONFIG[p];
}
}
return config;
}
function makeLetterObject(letter, container, initX){
var obj = {}; // This object gets augmented and returned at the end
var height = container.offsetHeight;
var div = makeLetterDiv(letter, container);
var x, y;
var v;
var h = div.offsetHeight, w = div.offsetWidth;
var calcHalfATSquared = 0.5 * config.g * config.timeDelta * config.timeDelta;
var calcAT = config.g * config.timeDelta;
var timer;
function tick(){
// This gets called repeatedly by the timer
y = y - (v * config.timeDelta) + calcHalfATSquared;
v = v + calcAT;
if (y <= 0 && v > 0){
v = v - config.bounceDecrement;
if (v<0) v=0;
if (v>0){
v = -v * config.bounceFactor;
} else {
// Kill the timer - we don't need it any more
clearInterval(timer);
timer = null;
}
}
move(x,y);
}
obj.getDiv = function(){
return div;
}
obj.start = function(){
x = initX;
y = (height - div.offsetHeight);
v = 0;
move(x, y);
div.style.visibility = 'visible';
timer = setInterval(tick, config.timeDelta * 1000);
}
obj.stop = function(){
if (timer){
clearInterval(timer);
timer = null;
}
}
function move(x,y){
// Profiled various ways of doing this - this one seemed the fastest
div.style.cssText = 'position: absolute; top: ' +
(height - h - y) + 'px; left: ' +
(x) + 'px;';
}
function makeLetterDiv(letter, container){
// Make a absolutely-positioned div to hold the letter, and return it
var box = document.createElement('div');
box.style.position = 'absolute';
box.style.visibility = 'hidden';
container.appendChild(box);
var txt = document.createTextNode(letter);
box.appendChild(txt);
return box;
}
return obj;
}
}
CODEBOX.bounceMsg.stop = function(){
if (CODEBOX.bounceMsg.letterObjects){
var letterObj;
for(var i=0; i