Demo Dynamic HTML - Imágenes en movimiento con efecto distorsión

Imágenes con efecto distorsión

Compatibilidad: Ms Internet Explorer

Demo que genera un movimiento de imágenes de derecha a izquierda y un efecto distorsión final. El efecto es similar al de un balón que bota.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT">

presents=new Image();
presents.src="rem.gif";	
presents=new Image();
presents.src="newadventures.gif";

var pwhratio = 164/53;   //ratio of width to height for REM image
var nwhratio = 400/53;   //ratio of width to height for NewAdventures image
var increment = 8;
var step = 24;  // number of increments required to grow to full size (188 / 4)
var i = 0;
var x;
var startH = 0;  //starting width for the image
var endH = 188;
var squashedL;
var squashedW;

</SCRIPT>

<SCRIPT FOR=remPath Event=onstop LANGUAGE="JSCRIPT">
  squashPres();
</SCRIPT>

</HEAD>

<OBJECT ID="Seq"
    CLASSID="CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96">
</OBJECT>

<OBJECT ID="remPath" CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
        <PARAM NAME="AutoStart" VALUE="0">
        <PARAM NAME="Bounce" VALUE="0">
        <PARAM NAME="Duration" VALUE="1.0">
        <PARAM NAME="Shape" VALUE="Polyline(2, 700,100, 252,100)">
        <PARAM NAME="Target" VALUE="presents">
</OBJECT>

<OBJECT ID="advenPath" CLASSID = "CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6">
        <PARAM NAME="AutoStart" VALUE="0">
        <PARAM NAME="Bounce" VALUE="0">
        <PARAM NAME="Duration" VALUE="1.0">
        <PARAM NAME="Shape" VALUE="Polyline(2, 700,150, 135,150)">
        <PARAM NAME="Target" VALUE="newadven">
</OBJECT>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]