HTML5 Canvas Elastic Stars with KineticJS

Instructions: Drag and drop the stars and observe the elastic drop on dragend. Refresh the page to randomize the stars again

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-image: url('http://www.html5canvastutorials.com/demos/assets/greenstars.jpg');
        display: inline-block;
        overflow: hidden;
        height: 365px;
        width: 580px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      function addStar(layer, stage) {
        var tween = null;
        var scale = Math.random();

star.on('dragstart', function() {
          if (tween) {
            tween.pause(); 
          }
          star.setAttrs({
            shadowOffset: {
              x: 15,
              y: 15
            },
            scale: {
              x: star.attrs.startScale * 1.2,
              y: star.attrs.startScale * 1.2
            }
          });
        });

star.on('dragend', function() {
          tween = new Kinetic.Tween({
            node: this, 
            duration: 0.5,
            easing: Kinetic.Easings.ElasticEaseOut,
            scaleX: star.getAttr('startScale'),
            scaleY: star.getAttr('startScale'),
            shadowOffsetX: 5,
            shadowOffsetY: 5
          });
          
          tween.play();
        });

layer.add(star);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 363
      });

var layer = new Kinetic.Layer();
      var dragLayer = new Kinetic.Layer();

for(var n = 0; n < 10; n++) {
        addStar(layer, stage);
      }

stage.add(layer);
      stage.add(dragLayer);

</script>
  </body>
</html>

< World Map Custom Scrollbars >

More Examples

Modified on December 19th, 2012 by Eric Rowell