• Home
  • News
  • Tutorials
  • Analysis
  • About
  • Contact

TechEnablement

Education, Planning, Analysis, Code

  • CUDA
    • News
    • Tutorials
    • CUDA Study Guide
  • OpenACC
    • News
    • Tutorials
    • OpenACC Study Guide
  • Xeon Phi
    • News
    • Tutorials
    • Intel Xeon Phi Study Guide
  • OpenCL
    • News
    • Tutorials
    • OpenCL Study Guide
  • Web/Cloud
    • News
    • Tutorials
You are here: Home / Featured article / A Simple Way to Add Aspect-Preserving Responsive Design HTML5 Animations Using WebGL

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

July 30, 2014 by Rob Farber Leave a Comment

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.)

WebGLPlay

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.

HTML with embedded styles
1
2
3
<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.

 

Simpler version but with different scaling behavior
1
2
3
<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>

 

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.

Minor modifications were made to the threex.text github example by Jerome Etienne.

Share this:

  • Twitter

Filed Under: Featured article, Featured tutorial, News, Tutorials, Web/Cloud Tagged With: HTML5, web-development, WebGL, Wordpress

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tell us you were here

Recent Posts

Farewell to a Familiar HPC Friend

May 27, 2020 By Rob Farber Leave a Comment

TechEnablement Blog Sunset or Sunrise?

February 12, 2020 By admin Leave a Comment

The cornerstone is laid – NVIDIA acquires ARM

September 13, 2020 By Rob Farber Leave a Comment

Third-Party Use Cases Illustrate the Success of CPU-based Visualization

April 14, 2018 By admin Leave a Comment

More Tutorials

Learn how to program IBM’s ‘Deep-Learning’ SyNAPSE chip

February 5, 2016 By Rob Farber Leave a Comment

Free Intermediate-Level Deep-Learning Course by Google

January 27, 2016 By Rob Farber Leave a Comment

Intel tutorial shows how to view OpenCL assembly code

January 25, 2016 By Rob Farber Leave a Comment

More Posts from this Category

Top Posts & Pages

  • Face It: AI Gets Personal to Make You Look Better!
  • Intel Xeon Phi Optimization Part 1 of 3: Multi-Threading and Parallel Reduction
  • LibreOffice OpenCL Acceleration for the Masses - Intel vs. AMD GPU performance
  • The CUDA Thrust API Now Supports Streams and Concurrent Tasks
  • Native File Systems on Intel Xeon Phi

Archives

© 2021 · techenablement.com