INTRODUCTION

In this blog, I’m going to give you the snippet of javascript code which you will just copy, paste, and, voilà, it’s ready to use. The intention is to show this functionality to all of those who don’t want to learn javascript but want to try how it works and maybe just use it in their project. In most cases copying javascript code without understanding it is not the best idea, because of safety and functionality. But this code snippet is simple and innocent. I promise. Those of you who know some javascript will know how to modify this chunk of code. But this is not necessary. You can use it “as it is”.

First, you can play with my demo to see what kind of effect I’m talking about. Javascript operates the red cross swirl. The rest is done by the Captivate’s advanced action.

INSTRUCTIONS

So we want to create a cross which we want to use, let’s say, as a button to hide an element in our project. We want to add a little “motion gadget”. When the user hovers over the cross it will turn around.

1. Create a cross and name it. The name is the crosse’s Id. But it’s just terminology. You don’t have to worry about that.

2. Copy the code below:

document.getElementById(“cross_1“).addEventListener(“mouseover”, MF222);
function MF222()
{
var h = document.getElementById(“cross_1c”)
var options = {
iterations: 1,
direction: ‘normal’,
duration: 700,
fill: ‘both’,
easing: ‘ease-in-out’,
}

var keyframes = [
{ transform: ‘ rotate(0deg)’ },

{ transform: ‘ rotate(360deg)’ }

];

h.animate(keyframes, options );
};

3. Go to “properties’ tab -> actions-> on enter, and from the drop-down menu choose “execute javascript”. Then press Script_Window.

This is the place where you paste the code.

4. Now just make two small changes. Exchange the elements that I put in bold (cross_1). So, for example,  if you named your cross “cr1”, instead of  “cross_1” you put “cr1”. Now two important things. Inverted commas must remain unchanged and in this line –  var h = document.getElementById(“cross_1c”) –  letter ‘c’ must remain in place. So to put it in a nutshell, exchange only the elements which are in bold. All other elements must remain untouched.

5. Now click the “OK” button and everything is ready.

FINAL REMARKS.

• I only animated the cross with javascript. The rest is done by an advanced action attached to the cross. If you are interested, the accordion is below:

• You can animate any objects this way. Not necessarily a cross .
• If you want to use the same code for many slides, it won’t work. You would have to exchange the name of functions and variables.
• Don’t copy and paste elements with JS code attached. Captivate will throw out an error and closes down. All unsaved elements will be gone. I’m not sure if it always happens, but I guess pretty often.

Thank you for reading this blog!

Take care and stay healthy!