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.)
Leave a Reply