INTRODUCTION

This blog is the next in my series of presenting ready-to-use chunks of javascript code with simple instructions on how to use them. This time I would like to show you an example of a flashing text box. There are many cases, where we want to highlight something important. Using this technique, nothing will pass unnoticed.

IDEA

First, click on the button below and see the project. Get the idea of what kind of effect I’m talking about.

STEPS

1. Create a textbox and give it a name. In my example, the name (id) of the textbox is “test”.

2.Copy the code from the link below (don’t use the code directly from this blog, because it might not work due to some markings which are added by the browser.)

flashingButtonCode

Next, paste the code in Properties->actions->on enter->execute javascript->script window , as shown below.

The code you will get is below:

var kk2 = document.querySelector(“#testc”);

var options = {
iterations: Infinity, iterationStart: 0,
delay: 0,
endDelay: 0,
direction: ‘alternate’,
duration: 2000,
fill: ‘forwards’,
easing: ‘ease-in-out’, }

var keyframes = [
{ backgroundColor:”orange“},
{ backgroundColor:”yellow” }

]

kk2.animate(keyframes, options);

3. To make the code work, exchange the name “test”  for the name you gave to your textbox ( or just name your textbox “test”, then the code will work without any changes.)  You must leave the letter “c” after the name. It is the Captivate’s API indicator, so it is an important thing! Just change the name itself.

4. There are two other editable code elements here. First,  the colors. You can experiment by choosing the colors of your liking and changing them.   For simplicity, you can use the color names taken from the webpage below:

https://www.w3schools.com/colors/colors_names.asp

For example, you might want to  exchange, let’s say, “yellow” for “red” and ” “yellow” for “pink”. Just experiment.

The next editable element is time. You can see the number 2000. This means 2000  milliseconds. So the length of this animation is 2 seconds. If you want to make it more “blinking”, change it to, let’s say, 1500, which means 1 second and a half. You might as well to extend the length of the animation to create the impression of  “slow” blinking.

And this is it. I hope you will enjoy it!