MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

A guide to use transitions in your website with DHTML and CSS

In this article we will see some techniques about transitions effects using DHTML. You can use these techniques in web images, text, animated sequence, etc.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

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.

Note: 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);
  visibility:hidden" />

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.

</SPAN>

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

MyImg.filters(0)]

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”

<SCRIPT>
function applyTransition (oImg)
{
    oImg.filters(0).Apply();
    oImg.style.visibility = "visible";
    oImg.filters(0).Play();
}
</SCRIPT>

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)" ... >
    :
    :
</BODY>

Conclusion

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.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login