git.infodrom.org Git - infodrom/rico3/blob - examples/html/animation-effects.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2
   3 <html>
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   6 <title>Rico</title>
   7
   8 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   9 <script type='text/javascript'>\r
  10 var div1,div2,enlarge=true,fadeOut=true,moveRight=true;\r
  11 Rico.onLoad( function() {\r
  12   Rico.Corner.round('effect_object_r');\r
  13   div1=Rico.$('effect_object');
  14   div2=Rico.$('effect_object_r');
  15 });\r
  16 \r
  17 function animateSize() {\r
  18   var newsize=enlarge ? 240 : 120;\r
  19   enlarge=!enlarge;\r
  20   Rico.animate(div1,{duration:500},{width:newsize});\r
  21   Rico.animate(div2,{duration:500},{width:newsize});\r
  22 }\r
  23 \r
  24 function animateFade() {\r
  25   if (fadeOut) {\r
  26     Rico.fadeOut(div1,500);\r
  27     Rico.fadeOut(div2,500);\r
  28   } else {\r
  29     Rico.fadeIn(div1,500);\r
  30     Rico.fadeIn(div2,500);\r
  31   }\r
  32   fadeOut=!fadeOut;\r
  33 }\r
  34 \r
  35 function animatePosition() {\r
  36   var newpos=moveRight ? 400 : 0;\r
  37   moveRight=!moveRight;\r
  38   Rico.animate(div1,{duration:500},{left:newpos});\r
  39   Rico.animate(div2,{duration:500},{left:newpos});\r
  40 }\r
  41 \r
  42 function animateSizeAndPosition() {\r
  43   var newsize=enlarge ? 240 : 120;\r
  44   enlarge=!enlarge;\r
  45   var newpos=moveRight ? 400 : 0;\r
  46   moveRight=!moveRight;\r
  47   Rico.animate(div1,{duration:500},{width:newsize,left:newpos});\r
  48   Rico.animate(div2,{duration:500},{width:newsize,left:newpos});\r
  49 }\r
  50 \r
  51 function animatePositionAndFade() {\r
  52   var newopacity=fadeOut ? 0 : 1;\r
  53   fadeOut=!fadeOut;\r
  54   var newpos=moveRight ? 400 : 0;\r
  55   moveRight=!moveRight;\r
  56   Rico.animate(div1,{duration:500},{opacity:newopacity,left:newpos});\r
  57   Rico.animate(div2,{duration:500},{opacity:newopacity,left:newpos});\r
  58 }\r
  59 </script>
  60
  61 <link href="../demo.css" type="text/css" rel="stylesheet">\r
  62 <style type="text/css">\r
  63 div.sizeMe {\r
  64    width            : 120px;\r
  65    background-color : #c6c3de;\r
  66    padding-top      : 10px;\r
  67    padding-bottom   : 10px;\r
  68    font-family      : Arial;\r
  69    font-size        : 11px;\r
  70    text-align       : center;
  71    position         : absolute;\r
  72    left             : 0px;\r
  73 }\r
  74 </style>\r
  75 \r
  76
  77 </head>
  78
  79
  80 <body>
  81
  82 <h1>Rico Animation &amp; Effects</h1>
  83 \r
  84 <p id='libname'>Base Library: \r
  85 <script type='text/javascript'>\r
  86 document.write(Rico.Lib+' '+Rico.LibVersion);\r
  87 </script>\r
  88 </p>\r
  89 \r
  90 <p>\r
  91 <table border='0'>\r
  92 <tr>\r
  93 <td>\r
  94 <td><button onclick="animateSize();">Animate Size</button>
  95 <td><button onclick="animateFade();">Fade Out/Fade In</button>\r
  96 \r
  97 <tr>\r
  98 <td><button onclick="animatePosition();">Animate Position</button>
  99 <td><button onclick="animateSizeAndPosition();">Animate Position &amp; Size</button>\r
 100 <td><button onclick="animatePositionAndFade();">Animate Position &amp; Fade</button>\r
 101 </table>\r
 102
 103
 104 <p>&nbsp;
 105
 106 <div id="effect_object" class="sizeMe" style="border: 6px solid black;">
 107    <div style="height:50px; background-color:red;">Inner div content
 108    </div>
 109 </div>
 110
 111 <p style="height:100px;">&nbsp;
 112 \r
 113 <div id="effect_object_r" class="sizeMe">
 114    <div style="height:50px; background-color:red;">Inner div content
 115    </div>
 116 </div>
 117
 118 </body>
 119 </html>