Responsive animation working cross-browser

1 Views

I am designing a website for a client and they want some animation (non interactive) on the top of every page. The site should be accessible with any browser and device.
Can you please help me to find a solution?

  1. Scenario 1: design the animation in Flash. Benefit: it is light. Problem: won’t show in iPads/iPones.

    Read More

  2. Scenario 2: convert the animation in HTML (I use the Toolkit for createJS from within Flash, which converts the animation inot a HTML document plus a .JS). I then include the animation in an iFrame on a slideshow (I use LayerSlider). Problem: Firefox has huge issues with iFrames, simply it doesn’t show it (although if I click on “reload this frame, it shows, but of course we don’t expect visitors to do this trick, don’t we?). Also in Android it is not visible.

  3. Scenario 3: convert the animation into an animated GIF. Problme: will not display in Android, plus it is a heavy file.

Can you please recommand me the best solution to have an animation display in any browser? Flash, HTML within an iFrame and animatedGIF don’t seem to work properly for the purpose: any other suggestion? The HTML and iFrame seemed to me the best, if only Firefox would accept it. But maybe there is some other format I did not think about?

Thanks a lot for your help, maybe I am trying to reinvent the wheel and your experience can really help me!

PS: Ideally I would like to include it within a slideshow (LayerSlider) in a WP site.

Post Views: 1

Related posts

Leave a Reply

2 comments

  2. What I am designing are complex animations originally built in flash.
    As a solution I am converting them to HTML5 and saving them as a separate webpage, then within the slider I use iFrames to call them. Using the Flash conversion tool I then added this snippet to the JS file in order to achieve responsiveness:

    $(document).ready( function(){
var c = $(‘#respondcanvas’);
var ct = c.get(0).getContext(’2d’);
var container = $(c).parent();

$(window).resize( respondcanvas );

function respondcanvas(){
c.attr(‘width’, $(container).width() );
c.attr(‘height’, $(container).height() );}

respondcanvas();`

    This way the animations are also fully responsive and compatible with all browsers.

    Hope this solution can help others.