Experiments in HTML 5 = Part 2

[mxc]

Another HTML 5 experiment. This one only works in Firefox and not in Chrome *sigh*. According to my current knowledge the generated dom is all standards complaint so can only assume its a problem with Chrome. Don't have time to start figuring out cross-browser issues right now. Will wait and see if the next release of Chrome fixes it.

This one is much less intensive than the first experiment so should work in even modest machines

SVG & HTML 5 Experiment 2

 

[Darko]

I don't think that browsers lag because the machines aren't the latest spec (I have a 2014 MacBook Pro...), I think that your JS could be better optimised.

This:

var letters = new Array();

                letters.push("j");
                letters.push("u");
                letters.push("m");
                letters.push("p");
                letters.push("i");
                letters.push("n");
                letters.push("g");
                letters.push("b");
                letters.push("e");
                letters.push("a");
                letters.push("n2");

Could have very simply been written as:

var letters = ["j","u","m","p","i","n","g","b","e","a","n"];

The effect is very cool, but I have a question as to why not just use CSS to do it?

 

[mxc]

I don't think that browsers lag because the machines aren't the latest spec (I have a 2014 MacBook Pro...), I think that your JS could be better optimised.

This:

var letters = new Array();

                letters.push("j");
                letters.push("u");
                letters.push("m");
                letters.push("p");
                letters.push("i");
                letters.push("n");
                letters.push("g");
                letters.push("b");
                letters.push("e");
                letters.push("a");
                letters.push("n2");

Could have very simply been written as:

var letters = ["j","u","m","p","i","n","g","b","e","a","n"];

The effect is very cool, but I have a question as to why not just use CSS to do it?

Thanks for the feedback! One of the main reason for the experiment was to see what SVG could do. Turns out there are some things that SVG has that CSS doesn't, at least it didn't last time I checked. The light filter, for example, is not possible with CSS.(It's subtle but you can see the letters "sparkle" at the end of the animation.) SVG has an image processing pipeline that is pretty cool. On the other hand it doesn't have matrix3d transforms and is purely 2d. However you can put the SVG in a div and apply matrix 3d to the div! Thats what I did in the first experiment.

The JavaScript runs only once to set-up the CSS and SVG Dom elements at page load time, and then its the browser is doing all the work from there. Essentially once the letters are one the screen the JavaScript is done. Your suggestion is more elegant and efficient, though. and beautiful code is always better

I suspect there might be a better way to set up the animations. Lots to learn about which is faster, SVG animation versus CSS, Canvas versus DOM etc. Will need to run some benchmarks. It will probably differ between browsers too.

Sadly its easier to do some things in one technology than the other. I am sure browsers will improve quickly. I just hope we don't have to end up learning a lot of useless rules based on browser tricks and side-effects to get it to do what we need it to do.

 

[mxc]

Got it working in Chrome this afternoon. Some minor difference between Firefox and Chrome. I think the Firefox implementation is more robust. See what excess white space and semi colons can do to you. All explained in my follow up Firefox and Chrome browser SVG incompatibilities post.

Hope it helps some one.