STIC:Atelier graphisme, animation, interactivité et HTML5/Animation avec DOM

De EduTech Wiki
Aller à la navigation Aller à la recherche 
<!DOCTYPE html>

<!-- Dynamic Positioning, originally by Deitel & Associates, Inc: 
     Internet and World Wide Web, How To Program  -->
<!-- adapted to more real DOM + simplified JS by Daniel K. Schneider 2007
     There may be copyright issues ... -->
<!-- Changed to HTML5 in 2015 -->

<html>
   <head>
      <title>Dynamic Positioning</title>

      <script type = "text/javascript">
         var speed = 5;
         var count = 10;
         var firstLine = "Text growing";
         var pText;
         var timer;

         function start()  {
            pText = document.getElementById("pText");
            timer = window.setInterval( "run()", 100 );
         }

         function run() {
            count += speed;

            if ( ( count % 200 ) == 0 ) {
               speed *= -1;
               pText.style.color = ( speed < 0 ) ? "red" : "blue" ;
               firstLine =         ( speed < 0 ) ? "Text shrinking" : "Text growing";
            }

            size = Math.round (count / 3) ;
            pText.style.fontSize = size + "px";
            pText.style.left = count + "px";
            pText.innerHTML = firstLine + "<br /> Font size: " + size + "px";
	}
      </script>
   </head>

   <body onload = "start()">
      <p id = "pText" style = "position:absolute; left:0; font-family:serif; color:blue">
      Welcome!</p>
    <form>
      <p align="right"><input value="Stop this" type="button" onclick="(window.clearInterval(timer));">
      <p align="right"><input value="Start again" type="button" onclick="start();"></p>
    </form>
   </body>
</html>
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:Atelier_graphisme,_animation,_interactivité_et_HTML5/Animation_avec_DOM&oldid=44961 »