Createjs - Highlight Text
HTML
<canvas id="demoCanvas"></canvas>
<button onclick="bouncetext(txt)">Bounce</button>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&subset=latin-ext" rel="stylesheet">
JavaScript
//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
var txt = new createjs.Text("Takich trzech na nas dwóch", "55px Lato", "#000");
txt.y = 45;
stage.addChild(txt);
stage.update();
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
function bouncetext(txt, callback){
var originaltxt = txt,
parent = txt.parent,
letters = txt.text.split('');
parent.removeChild(txt);
var totalx = 0,
size = parseInt(txt.font.replace( /^\D+/g, '')),
holder = document.createElement('div'),
fakes = [];
var x = document.createElement('div');
x.style.font = txt.font;
x.style.position = 'absolute';
x.style.fontSize = size + 'px';
x.style.padding = 0;
document.body.appendChild(x);
for(var i = 0; i < letters.length; i++){
var l = new createjs.Text(letters[i], txt.font, txt.color);
l.textAlign = 'left';
l.y = txt.y;
l.x = totalx;
parent.addChild(l);
fakes.push(l);
x.innerText = letters[i];
totalx += x.clientWidth || size/2.5;
}
document.body.removeChild(x);
for(i in parent.children){
createjs.Tween.get(parent.children[i]).wait(i* 200)
.to({y: l.y - 30}, 200).to({y:l.y}, 200);
}
setTimeout(function(){
for(i = 0; i < fakes.length; i++){
parent.removeChild(fakes[i]);
}
parent.addChild(txt);
if(callback) callback();
},letters.length * 200 + 200)
}