How to place an HTML5 animation in a widget?

How do I go about adding an HTML5 animation to a widget area. I have the HTML which I have added to a text box in the widget area. This displays the animation but then the rest of the page stops working. Why might this be? I'm replacing a flash animation which was easy to get to work, but I am finding the advice on HTML5 animations to be confusing.

 

hello,
a piece of code or your website url to check if there is a conflict or something will be helpful...

 

Hi themes4all and thank you for replying. The page currently has a flash animation on it and can be seen here:
http://thelazytrader.com/forex-blog/page/2/
Its the top right widget area. The HTML file is here:
http://thelazytrader.com/wp-content/uploads/2013/10/Rob-LT-banner-October-2013-updated-red-button.html
Thats it on a page on its own.

The file is a Google swiffy conversion of the flash file you can see in the first link. Does any of this help you to help me?

 

hello,

so i did a surf on your website... the widget on the Top Left is working good, the coding side if good there is no conflict, i tested your page with google chrome and firefox, all is working good! So which stuff stopped working !?

 

Hi themes4all,

I have confused things here. Because the site is live I couldnt leave the HTML5 animation on it so I reverted back to the Flash file which indeed works fine. Thats why I linked to the HTML5 file on its own. I thought perhaps that by seeing the website and the source for the HTML5 animation that someone might be able to help me. No luck though. I havent even found a single tutorial on how to add an HTML5 animation to Wordpress which is odd.

 

hello there,
i just tried your code, here how you have to do :

Place this in the header.php before </head>

<script src="https://www.gstatic.com/swiffy/v5.3/runtime.js"></script>

Code (markup):

Go to your Dashboard, Create a new Text Widget and Place it where you want. Add this code inside :

<div id="swiffycontainer" style="width: 236px; height: 291px">
<script>
      swiffyobject = {"internedStrings":["::::::6Y:","::::::4O:","::::::2J
.............................................. all the code till </script>
</div>
<script>
     
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
                                   swiffyobject);
     
      stage.start();
    </script>

Code (markup):

I just tested it to my wordpress blog and it's working.

Goodluck

 

themes4all thats great, works perfectly. Thank you very much

On a connected note, can you think of a way to rotate multiple HTML5 animation banners so that each time a person goes to a new page they see a different, randomly shown banner? I can do this with Flash using a plugin but I dont have that option with HTML5.