You are here: Home > Scripts > Javascript Image Transitions, Slide, Gradient

What's
New

Doll
Makers

Room
Makers

Puzzle
Makers

Dress Up
Games

Back to Scripts

Javascript Image Transitions 6: Slide and GradientWipe

Requires Internet Explorer 5.5 or later to work
The DIV is located below, before applying image filters the image object requires its layout to be set.
We do that by setting its height and width properties (done inside the style tag).
Having the layout defined can also be done by setting the position attribute to absolute.
Or the layout can be defined by setting the property CONTENTEDITABLE in the div.

Transition Slide:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
bands Number of strips the content is divided into
slideStyle 'hide' slide new content over old, 'push' push old content out with new content and 'swap' alternating bands expose new content (see demo below)

Transition GradientWipe:
duration the length of time a transistion takes to complete, format seconds.milliseconds (0.0000), a value of 0.5 is half a second
motion sets the direction of motion for the transition. Possible values: up, down, right, left
gradientSize the percentage of the object that is covered by the gradient band

To execute ANY transistions on an image, div, span or body you need to follow 3 steps

set object filter to 'Apply()'
set new image, visibilty, color
set object filter to 'Play()'

Div text
applied to DIV	applied to IMG

DHTML Source


<SCRIPT>
function applyTransition (obj)
{
    obj.filters(0).Apply();
    obj.style.visibility = "visible";
    obj.filters(0).Play();
}
function applyImageTransition (obj, imgsrc)
{
    obj.filters(0).Apply();
    obj.src=imgsrc;
    obj.filters(0).Play();
}
</SCRIPT>

<!-- This DIV is the target container for the image.  -->  
    <table><tr><td width=250 height=100>
      <div id="mydiv" style="width:250; height:120; visibility:hidden; background-color:#DDDDDD">
          <center>
          <img src='../images/BABY_doll.gif' STYLE="width=40; height=28;"><br>
          <img src='../images/DOG_room.gif' STYLE="width=40; height=28;"><br>
          <img src='../images/CANDY_doll.gif' STYLE="width=40; height=28;"><br>
          <font size=1>Div text</font>
          </center>
      </div>
    </td><td width=250 height=100 align=center valign=center>
      <img id="myimg" src='../images/CANDY_doll.gif' STYLE="width=40; height=28;">
    </td></tr>
    <tr><td align=center><font size=1 face=arial>applied to DIV</td>
    <td align=center><font size=1 face=arial>applied to IMG</td></tr></table>
    <br>
    <br>
<!-- Buttons to manipulate the div and image.  -->
<table>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=hide)'; applyTransition(mydiv)">transition Slide hide</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=hide)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Slide hide</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=push)'; applyTransition(mydiv)">transition Slide push</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=push)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Slide push</button></td>
  </tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=swap)'; applyTransition(mydiv)">transition Slide swap</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle=swap)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition Slide swap</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.filter='progid:DXImageTransform.Microsoft.GradientWipe(motion=right)'; applyTransition(mydiv)">transition GradientWipe</button></td>
    <td></td>
    <td><button onclick="myimg.style.filter='progid:DXImageTransform.Microsoft.GradientWipe(motion=right)'; applyImageTransition(myimg,'../images/BOY_doll.gif')">transition GradientWipe</button></td>
  </tr>
  <tr>
    <td><button onclick="mydiv.style.visibility='hidden';">Reset</button></td>
    <td></td>
    <td><button onclick="myimg.src='../images/CANDY_doll.gif';">Reset</button></td>
  </tr>
</table>

References:
MSDN - Slide transition
MSDN - GradientWipe transition

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License