A Simple Way to Add Aspect-Preserving Responsive Design HTML5 Animations Using WebGL

Learn how to include really fast WebGL accelerated interactive 3D content in your posts – including responsive design WordPress sites like TechEnablement! This first in a series of Web-Dev tutorials teaches how to add an interactive 3D text animation to via a simple embedded iframe HTML statement. The CSS is included in the HTML so no site css modifications required! The beauty of this approach is that these WebGL graphics “automagically” resize to fit the screen of the device – without distortion – by preserving the aspect-ratio of the animation. View this article on different devices, or simple view this tutorial through a responsive design test site like Responsinator. Start adding WebGL accelerated 3D content to your site today.

A safe default that is not responsive

Most browsers now support webGL by default. Some older browsers need to have webGL enabled or, unfortunately do not provide webGL. For those browsers a clickable image much like Google uses on their homepage can enable the animation while also showing a static image of the content. (After clicking the image, wiggle the mouse over the animation. If the animation does not show, then enable WebGL in your browser.)

Click to play

See it in action using embedded CSS

Wiggle the mouse over the animations to make them move.

Here is the HTML for the following views. (This should be added in the WordPress text mode.) Note the naming of the embed-container is different as is the value for padding-bottom.

<style>.embed-container1 { position: relative; padding-bottom: 30%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container1 iframe, .embed-container1 object, .embed-container1 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container1'><iframe src='http://techenablement.com/html5/threex.text/examples/basic.html' frameborder='0' allowfullscreen></iframe></div>
<p> </p>
<style>.embed-container2 { position: relative; padding-bottom: 80%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container2 iframe, .embed-container2 object, .embed-container2 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container2'><iframe src='http://techenablement.com/html5/threex.text/examples/basic.html' frameborder='0' allowfullscreen></iframe></div>

See it in action – WordPress modified code

WordPress wants to include the embedded iframe in simpler HTML as shown below. This may or may not be what you want. On my editor, switching between visual and text editing automatically converts the previous HTML to the following. As you can see, the display is different.

<iframe width="300" height="150" src="http://techenablement.com/html5/threex.text/examples/basic.html" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<div class="embed-container"><iframe width="300" height="250" src="http://techenablement.com/html5/threex.text/examples/basic.html" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

</div>

Acknowledgements

The text animation demo is based on three.js.

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL. The source code is hosted in a repository on GitHub.