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(). paint(). 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.
WebGL™ is a trademark of the Khronos Group Inc.
|
3D Animation
