File: extlib/jquery.path/test/test.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin  >  iFSM Animation  >  extlib/jquery.path/test/test.html  >  Download  
File: extlib/jquery.path/test/test.html
Role: Example script
Content type: text/plain
Description: Example script
Class: iFSM Animation
Animate elements with parameters from attributes
Author: By
Last change: Update of extlib/jquery.path/test/test.html
Date: 1 month ago
Size: 3,761 bytes
 

Contents

Class file image Download
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src='../jquery.path.js'></script>
<link type="text/css" rel="stylesheet" media="screen" href="http://weepy.github.com/style.css"/>


<link type="text/css" rel="stylesheet" media="screen" href="http://github.com/weepy/weepy.github.com/raw/master/style.css"/>
<style>
#arc { position: relative; width: 600px; height: 300px; }
#bezier { position: relative; width: 600px; height: 300px; }
#sine { position: relative; width: 600px; height: 300px; }
.pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
.dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
a {  cursor: pointer;}
h1 { margin: 30px 0;}

</style>

<script>

var SineWave = function() {
  this.css = function(p) {
    var s = Math.sin(p*20)
    var x = 500 - p * 300 
    var y = s * 50 + 150
    var o = ((s+2)/4+0.1)
    return {top: y + "px", left: x + "px", opacity: o}
  } 
};


$().ready(function() {
  

  var Paths = {"arc":[], "bezier":[], "sine": []}
  
  var path_fns = {
    arc: function(i) {
      return new $.path.arc({
        center: [285,185],	
    		radius: 100,	
    		start: -i*20,
    		end: i*100,
    		dir: (i%2) ? 1 : -1
      })
    },
    bezier: function(i) {
      var x = i%2 ? 1 : -1
      return new $.path.bezier({
        start: { x:185, y:185, angle: i*20 * x},	
      	end: {x:540,y:110, angle: i*10, length: i / 4.0}
      })
    },
    sine : function() {
      return new SineWave
    }
  }
  
  for(var type in Paths) {

    for(var i=0; i<10; i++ ) {
      if(type == "sine" && i != 9)
        continue
        
      var path = path_fns[type](i)
      Paths[type].push(path)

      var css = {
        "backgroundColor": (i%2) ? "red" : "yellow", 
        width: 20*(1+i), 
        height: 20*(1+i), 
        "-moz-border-radius": 10*(1+i), 
        "-webkit-border-radius": 10*(1+i), 
        marginLeft: -10*(1+i), // offset the div, so center is at origin
        marginTop: -10*(1+i) 
      }

      var $$ = $("<span class=pixel></span>").css(css)

      // initialize to start
      $$.css(path.css(1))
      $("#" + type).append($$)
    }
        
  }

  
  
  $(".start").click(function() {
    var i =0;
    var type = $(this).closest("div").attr("id")
    
    $("#" + type + " .pixel").each(function() {
      $(this).stop().animate({path: Paths[type][i] }, 3000)
      i++;
    })
  })
  
  
  $(".plot").click(function() {

    var $$ = $("<div>")
    var type = $(this).closest("div").attr("id")
    
    for(var t=0; t<1;t+= 0.01) {    
      for(var i in Paths[type]) {
        var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
        $$.append(d)
      }
    }
    $("#" + type ).append($$) 
  })

  
})

</script>

<body>
  <div class=page>
    <h1>Test: jQuery.path animation </h1>


    <h2>ten arcs</h2>
    <div id=arc>
      <p><a class=start  >Start</a> </p>
      <p><a class=plot >Plot</a>  </p>
    </div>

    <h2>ten beziers</h2>
    <div id=bezier>
      <p><a class=start  >Start</a> </p>
      <p><a class=plot >Plot</a>  </p>
    </div>
    
    
    <h2>custom path: sine wave</h2>
    <div id=sine>
      <p><a class=start  >Start</a> </p>
      <p><a class=plot >Plot</a>  </p>
    </div>
    
    
    
     <h2>links</h2>
     <ul>
     <li><a href='http://github.com/weepy/jquery.path/raw/master/jquery.path.js'>Javascript file</a></li> 
     <li><a href='http://github.com/weepy/jquery.path'>Project Page</a></li> 
     <li><a href='http://github.com/weepy/jquery.path/issues'>Feedback</a></li>
 
     </ul>
  </div>
</body>