Javascript in Lectora Lesson 10

Rollover and click the properties image on the left to see what to click and the bigger window.

As a followup on the previous lesson about coloring text, here is how to color a part, a sentence or word in a textfield in Lectora.

My favourite approach is using GSAP / Tweenmax for things like this. With the GSAP plugin SplitText you can easily split up a text into characters, words and/or lines. Animate or change any property of that text easily.

 

For ease sake im now using GSAP to get this done. Basically you need TweenMax and GSAP plugin SplitText.

 

Codewise its setup like this. First you tell GSAP what text to splitup.

 

splitTextArr = new SplitText("#text9278",{type:"chars,words,lines");

 

This splits all the text in this block up to chars,words and lines. Each with its own class. So when

thats done you can target and animate each character,word or line.

 

TweenMax.to(splitTextArr.words[5], 0.21, {color:"#ff00ff" });

 

This line then animates the color of the 5th word in this textblock to #ff00ff

 

Quite some easy and great animation possible with TweenMax and SplitText. Clicking the 3rd button you see a complex sample. Try clicking button 3 and then button 2, you will notice they combine.

 

More on TweenMax and SplitText in the next lessons

HTMLName = text9278

The function run by this button will color all spans in a textblock

The function run by this button will color specific text in the textblock

The function run by this button will show a more complex textanimation