Integration of WebGL™ with HTML / CSS Pages - taccGL™ Library Tutorial
HTML Element
This tutorial already showed various examples that appear to
animate HTML elements visible on the page,
e.g. the First Example. In fact WebGL™/the GPU cannot
directly animate HTML elements, just images on triangles. So taccgl™ takes
a snapshot image of the HTML element and maps this image on a
rectangle (made from 2 triangles).
This would normally show animated elements twice, the standard
browser display and the display via WebGL™. So taccgl™
automatically uses css visibility:hidden on the HTML element while
it is animated via WebGL™.
The first example below, shows this behaviour. The second line of the example
leaves the HTML and CSS alone and just runs the WebGL™ animation, which
results in two copies of the HTML element being visible.
taccgl.actor("htmlel"). to({ox:-500}). dur(3). start(); | RUN |
taccgl.a("htmlel"). paint(). to({ox:-500}). dur(3). start(); | RUN |
Note that actor implicitly includes the functionality
of a, paint, hideAtBegin,
and visAtEnd. For paint we refer to the tutorial
section HTML Elements on Canvas. hideAtBegin hides the HTML element before
playing the transition and visAtEnd makes it visible
afterwards.
It is also possible to animate HTML elements that are and stay hidden,
as discussed in the next section.
Animations can also make an HTML element appear or disappear as
discussed in the then following section.
Animating Hidden Elements
Animation examples, so far shown in this tutorial, animated an
HTML element (currently) shown on the screen. Likewise it is
possible to animate "hidden" elements:
Hidden TEXT
<div id="hid" style="visibility:hidden; font-size:120px; position:absolute">Hidden TEXT</div> | |
taccgl.actor("hid"). to({oy:-500,ox:-500}). dur(3). start(); | RUN |
taccgl.actor("hid"). resize(200,30). to(20,50,-4000). rotateMiddle(0,1,0). dur(3). start(); | RUN |
Note that this works only for hidden elements (CSS property visibility is set to hidden)
and not with elements disabled in some other way e.g. CSS property display set to none
or width / height set to 0, etc. Also hidden parts (elements nested inside the
animated element) do not show up. If you want to avoid, that a hidden element
nevertheless takes up some empty space on the screen, you can for example set the
CSS property position to absolute.
It is possible and useful to put several HTML elements that are needed
for animation into a single big hidden div
Make
Sure
Elements
Do not
Overlap.
<div style="visibility:hidden; font-size:120px; position:absolute; top:0px; left:0px "> <div id="txt1">Make</div> <div id="txt2">Sure</div> <div id="txt3">Elements</div> <div id="txt4">Do not</div> <div id="txt5" style="background-color:red">Overlap.</div> </div> | |
taccgl.actor("txt1").to({el:"ex40"}). dur(3).start(); taccgl.actor("txt2").to({el:"ex40"}). dur(3).startTime(1).start(); taccgl.actor("txt3").to({el:"ex40"}). dur(3).startTime(2).start(); taccgl.actor("txt4").to({el:"ex40"}). dur(3).startTime(3).start(); taccgl.actor("txt5").to({el:"ex40"}). dur(3).startTime(4).start(); | RUN |
Care must be taken, that animating elements that visually overlap might lead
to possibly unexpected results. We will discuss that later, for the time
being make sure that all elements used in a single animation do not overlap.
Making Things Appear
Animations that make an HTML element appear or disappear are quite common.
In order to create a pop-up that appears when the user clicks a link,
you first create the content of the pop-up as a hidden HTML element and
then pass "visible" as third argument to actor:
<div id="popup" style="visibility:hidden; position:absolute; width:50%; height:200px; padding-left:10%; padding-right:10%; background-color:cyan"> <h2 style="margin-top:50px"> Making Things Disappear</h2> You can make something disappear by passing <tt>hidden</tt> as third parameter to <tt>actor</tt>. Click on the above X to see. </div> | |
taccgl.actor("popup",null,"visible") . from({rx:-1,oy:-500}). rotateMiddle(0,1,0).start() | RUN |
In fact the third argument of actor specifies the visibility of the element after running
the animation. You can also pass hidden to make an element disappear or ""
to give an element its default visibility. Note that we in most cases so far used actor
with just one argument, however, some examples passed e.g. taccgl.dddBox to show a box.
In order to use the third, but not the second argument, null needs to be passed as
second argument as shown in the examples.
The following example code actually sits behind the div tag in the example above and
creates an X in the top right of the popup, being a link to close the popup again.
<div style="position:absolute; right:20px"><a href="javascript:taccgl.actor('popup',null,'hidden'). to(0,0,0). rotateMiddle(0,1,0).start(); taccgl.start()">X</a> | |
taccgl™ tries to make sure that even if the browser for some reason cannot show animations, setting of the
visibility still works. So even in older browsers without canvas, the popup example would still work, but
without the animation.
You can use HTML and CSS to place the popup wherever you like, however there is a limitation in taccgl™ that only
elements appearing within a certain pixel range can be animated, which means that these examples won't work
unchanged after a certain position on long HTML pages that are employing scrolling (see texCan options
on Library Options).
WebGL™ is a trademark of the Khronos Group Inc.
| 
3D Animation
