This is the working solution for the Roller Coster Text.
Feedback is welcome.
var text = 'Hello World!';
var div = document.getElementById('rollercoaster');
var size = 5;
console.log('length = ' + text.length)
for(var i = 0; i < text.length; i++){
if ( i < Math.floor(text.length / 2)) {
size += 5;
} else {
size -= 5;
}
console.log(size);
var span = document.createElement('SPAN');
span.style.fontSize = size + 'px' ;
var t = document.createTextNode(text[i]);
console.log(t);
span.appendChild(t);
console.log(span);
div.appendChild(span);
}