Canvas Library
 

Morphing and Deforming of CSS formatted HTML5 Elements

2D Effects

With the introduction of HTML5 canvas 3D (WebGL™) Deforming and Morphing effects of CSS formatted HTML elements become possible. They can be used to draw special attention to certain parts of an HTML page and provide many new possibilities for HTML / CSS design.

In this article we show some examples and often including the source code. All examples need a WebGL™ enabled client computer. If WebGL™ is not available the page should still be readable however without the effects.

Canvas 3D / WebGL™ does not seem to be available on your browser / client computer and so the examples in this article do not appear deformed or morphing. If only Canvas 2D or no canvas is available, taccgl™'s default behaviour is to show still show the content, but without deformation. In many cases this is an acceptable fallback to at least keep the content usable and readable.

The above paragraph shows the Wave effect. As you probably also notice, this effect immediately draws the attention to this paragraph, but on the other hand makes the text more difficult to read. Therefore these text effects need to be used carefully.

taccgl.actor("introPara",taccgl.flexiBorder) . Wave(5,5,5*-3.14159,0). duration(7200) . start(); 

The required javaScript code is shown in the box. It needs to be inserted into the onload and onscroll event handlers of the body of your HTML/CSS page. The HTML element in question needs to have an id attribute id="introPara" in this case. Finally the taccgl™ library needs to be downloaded, installed on your webserver, and included into your page as described in First Example under the "Running the example" headline.

The wave effect deformes a CSS formatted HTML element into a sinus wave form. You can adjust the amplitude and the frequency.

The wave effect deformes an HTML element into a sinus wave form.

taccgl.actor("samp1",taccgl.flexiBorder) . Wave(50,50,2*-3.14159,0). duration(7200) . start(); 

For example you can take only part of the sin Wave and adjust the amplitude of the top differently that for the bottom (100 and 10 in this case). See Wave for details.

The wave effect deformes an HTML element into a sinus wave form.

taccgl.actor("samp2",taccgl.flexiBorder) . Wave(100,10,-3.14159,0). bgColor("#eeffee"). duration(7200) . start(); 

There also is a circular effect, that turns an HTML element into a circle:

The circle effect deformes an HTML element into a circle.

taccgl.actor("samp3",taccgl.flexiBorder,null,2) . duration(7200). circular(). Circle(). start(); 

3D Effects

The wave effect deformes an HTML element into a sinus wave form.

taccgl.actor("samp4",taccgl.flexiBorder) . ZWave(1,1,5*-3.14159,0). bgColor("#eeffee") . posZ(-100) . resizeZ() . duration(7200) . start(); 

The ZWave method allows to create a 3 dimensional wave, as shown by the examples. Here it makes a lot of sense to give the HTML elements a background color. The 3D lighting effects of WebGL™ and taccgl™ then support the 3D effect.

The ZWave method allows to create a 3 dimensional wave, as shown by the examples. Here it makes a lot of sense to give the HTML elements a background color. The 3D lighting effects of WebGL™ and taccgl™ then support the 3D effect.

taccgl.a("samppara1",taccgl.flexiBorder) . opacity(0). opacityAtEnd() .paint()
. ZWave(0.2,0.2,2*-3.14159,0). bgColor("#eeffee"). posZ(-100) . resizeZ() . duration(7200) . start();
 

For the 3D examples as shown above, shadows are quite useful to further intensify the 3D effect. In order to display shadows the code posZ(-100) . resizeZ() in the examples is needed to indicate that the drawn elements are actually 100px in front of the main page body. In addition a background element to draw the shadows on is needed:

taccgl.a("shadowbox") . shadowOnly(). bgColor("#eeffee").duration(7200). start(); 

The flip is another interesting 3D effect simulating a kind of page flip.

The flip is another interesting 3D effect simulating a kind of page flip.

taccgl.a("samppara2",taccgl.flexiBorder). opacity(0). opacityAtEnd(). Flip(0.6,.6).depth(200)
. bgColor("#eeffee"). posZ(-100) . resizeZ() . duration(7200) . start();
 

Morphing CSS formatted elements

By morphing we talk about an animation that gradually changes the shape of an HTML element. The box below contains 6 examples, each of them having its own run button. Please go ahead and try out the run buttons. In contrast to the examples above these examples have two methods specifying a shape. In the first example there is Wave and Rect1 for morphing from Wave form into the usual rectangular form. The second example works vice versa using Rect and Wave1 to morph from rectangular into wave form.

Sample Text for Morphing the Shape of an HTML element

taccgl.actor("morphSample1",taccgl.flexiBorder) .
Wave(100,100,2*-3.14159,0). Rect1() . duration(5) . start();
RUN
taccgl.actor("morphSample1",taccgl.flexiBorder) .
Rect(). Wave1(100,100,-3.14159,0). duration(5) . start();
RUN
taccgl.actor("morphSample1",taccgl.flexiBorder) .
Wave(100,100,2*-3.14159,0). Wave1(100,100,-3.14159,0). duration(5) . start();
RUN
taccgl.actor("morphSample1",taccgl.flexiBorder) .
Wave(100,100,2*-3.14159,0). Wave1(100,100,-3.14159,0). duration(5) . start();
RUN
taccgl.actor("morphSample1",taccgl.flexiBorder)
.posZ(-200). resizeZ(). ZWave1(1,1,5*-3.14159,0). duration(5) . start();
RUN
taccgl.actor("morphPara",taccgl.flexiBorder)
.posZ(-500). resizeZ(). ZWave1(1,1,5*-3.14159,0). bgColor ("#ffcccc"). duration(5) . start()
.cont() . rotateMiddle(0.4,0.4,0.4) . duration (5) . start()
.cont() . Rect1() . start()
RUN

Conclusion

This article showed some very small example animations made with taccgl™'s flexible-border feature and WebGL™. We restricted ourselves on examples that are no longer than 4 lines of javaScript code. To see some more elaborate examples we refer to our Home Page. In order to get a complete understanding of the examples shown in here we refer to the taccgl™ Tutorial and then the taccgl™ Manual. Also if you like these examples or experience problems, please leave a comment below or send email.

Blog Articles

Parallax scrolling with 3D Acceleration
CSS Transition Opacity for Fade Effects
CSS Transition Display
CSS Transition Visibility
WebGL-HTML5 PopUp Animations
3D Objects on HTML pages
Deforming and Morphing of HTML

Tutorial Sections

First Example
Basic Shapes
Basic 3D Models
Basic Animations
Colors and Textures
Integration of HTML and WebGL
Timing Transitions
Boxes
JavaScript Embedding
External 3D Models
HTML Elements on Canvas
Selectors for Multiple Transitions
Flexibles
Fragment Shaders

 

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Tutorial
Previous Page: 3D Objects on HTML pages
Please Add a Comment or Question, click here!