Introduction to Transition:
Transitions are considered to be the most significant attribute Dynamic HTML (DHTML) that brings to the web. The advantage of transition that brings for web designers is that they can implement the same very fast and implement simpler visual effects on the web pages they are building for a website. This is done with the help of a simple HTML and comprises of a very minimal script code.
When it comes to slide show presentations, transitions are very effective as to move from one slide to the next. This is also called interpage transitions in DHTML. This is also useful in the case when to progressively render a graphic image on a page for a more subtle effect. Going back to a history of filters and transitions, Internet Explorer 4.0 was the first browser to have this implemented in.
As far as the syntax of transition is concerned, it got modified with the introduction of Internet Explorer 5.5 and we will discuss about the same in this article. Let us see the technique to apply transition on a web image. Blinds transition is the one that we will be making use of for our sample and this is implemented to all the transitions. We will make use of the function known by the name of applyfunction that is capable in order to apply any sort of transition in the application.
Making use of the DHTML process was just another way to make the transition technique to take place. The technology though not in pace with CSS3, jQuery or HTML but we still see it's existence particularly with the older versions of Internet Explorer 6 or below where it just stays and stays and then works.
We have the below steps that will detail and brief on the intention of this article to illustrate transitions effects on the image and text.
Step 1: The very first step is to define the image thereby specifying the desired transition as well.
We have the Blinds transition filter that is being applied inline to the img control via the CSS sheets –ms-filter attribute.
The value for the direction property is up in the code below and the bands property being set to 2 where in we have the transition play time that takes three seconds.
Other than this, we have two attributes that needs to be defined so as to form the basis of the next step i.e. Step 2
- We need to set the ID attribute so as to refer to this image element in script.
- As far as the CSS visibility attribute is concerned, this is required to be hidden initially, so the image transitions from being invisible to visible.
Listing 1: Representing the transition on image
<IMG ID="MyImg" src="images/pdc97.png" STYLE="filter:progid:DXImageTransform.Blinds(direction='down', bands=2);
Transitions are meant to be way beyond the images and are not just limited to the images and can be applied to text as well. A div or a span needs to be defined at the time of implementing transitions to text. This is done as to make the-ms-filter specified inline.
It is must to specify height, width or position: absolute at the time of making use of div or span with transitions. Not doing this will make the filter not be recognized as an object and this will result in a scripting error.
The objective of the below code is to illustrate the mandatory and required attributes. This is to specify in a span object so as to successfully implement a transition on a text block.
Listing 2: Representing the required attributes
<SPAN id=MyText style="width:250;
visibility:hidden; filter:progid:DXImageTransform.Blinds(direction='down', bands=1)">
It is very simple so as to incorporate visual flair to a page by making use of transitions where in the first step is to set the revealTrans filter on the style sheet for the object that is being transitioned.
Then, make use of the apply method so as to stop changes from being drawn and then alter whatever things you want to change.
Lastly, utilize the play method to transition to those changes.
2. In this step, we will write a function so as to initiate the transition.
The below lists a three-step process so as to cause the transition to take effect:
- Here a transition needs to be applied without causing an immediate repaint. This will make use of the apply method.
- Then we will need to make the below listed changes.
The visible property of the img object is set as visible with the image transitions from being invisible to visible. But this not valid always for the reason that we have in other image transitions into another image. This will make the src property of the img object being set to the URL of the new image that needs to be transitioned to.
- Here, in the last section we need to finish off the transition making use of the method known by the name of play.
The point to note here is for the filter attribute that is defined for the img object in Step 1 above, that how this is accessed via the help of making use of filters collection of the img object. The example in this case is MyImg. The filters collection returns all the filters defined for that element. Therefore, to access the first and only filter defined in the sample, use the following syntax (where 0 is the zero-based index):
The three steps discussed here have majority been summarized into the applyTransition function that raises the image object to a level where it can be transitioned as a parameter.
Listing 3: Representing the function “applyTransition”
function applyTransition (oImg)
oImg.style.visibility = "visible";
3. Finally we have the third step where you need to call the function.
Talking about the start time of the transition of this particular sample, it is initiated the moment page gets load. Post this it calls the applyTransition function on the onload event and the point to note here is the way pointer to the objectMyImg is passed to the function involving no quotation marks.
Assume we incorporate the quotation marks, such as "MyImg", this will result in the string "MyImg" that will be passed instead of the MyImg object, hence there will be no transition that would take place.
For example, in case we have a page that makes use of the transitions for an animated sequence, it would then call the applyTransition function on a timer event or on a mouse event. This is based on the way animation is being implemented.
Listing 4: Applying transition on the animated sequence
<BODY onload="applyTransition(MyImg)" ... >
We learned how to bring in transition to the images, text and animated sequence present on the pages of a website briefing in details about the steps to come to a fruitful outcome with the help of HTML.