LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
html {
  /* Set up the background  */
  background-color: #023E54;
  background-image: url(images/fallback-gradient.png);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#023E54), to(#10AAC0));
  background-image: -webkit-linear-gradient(top, #023E54, #10AAC0);
  background-image: -moz-linear-gradient(top, #023E54, #10AAC0);
  background-image: -o-linear-gradient(top, #023E54, #10AAC0);
  min-height: 100%;
  height: auto;
}

#shipcanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  /* Makes sure this is underneath other HTML elements (on my site, it's behind a login form  */
}
JS
(function(){
   // I load the easel.js library before this is called. 
   // https://code.createjs.com/easeljs-0.6.1.min.js
   // You don't see that in the codepen code though

  var myCanvas = document.createElement('canvas');
  var canvas = document.querySelector('body').appendChild(myCanvas);
  
  canvas.height=window.innerHeight;
  canvas.width = window.innerWidth;
  canvas.id = 'shipcanvas';
  
  var stage = new createjs.Stage(canvas);
  var centerX = canvas.width/2;
  var centerY = canvas.height/2;
  
  // Create the sprite with easel.js
  ss = new createjs.SpriteSheet({
  animations: {
    fly: [0, 14,"fly", 4]}, // identify the animation frames here
  images: ["http://planetoftheweb.com/_/images/powship_sprites.png"],
  frames: {
    regX: 158, // registration point to make sure
    regY: 113, // it follows  the mouse from the center
    width: 316,
    height: 226
  }
});

  var ship = new createjs.BitmapAnimation(ss);
    ship.gotoAndPlay("fly");
    stage.addChild(ship); 
    createjs.Ticker.setFPS(60);
    ship.x = centerX;
    ship.y = 65;
  ship.scaleX = .4;
  ship.scaleY = .4;


  createjs.Ticker.addListener(function() {
    var difX = stage.mouseX - ship.x;
    var difY = stage.mouseY - ship.y;

    ship.x += difX/100; //making these numbers (100) smaller makes it go faster
    ship.y += difY/100;

    stage.update();
  });
})();
Host Instantly Drag and Drop Website Builder

 

Description

I built this for my school class website http://planetoftheweb.com as a replacement for something I used to do in Flash...have a graphic follow the mouse movement. It's done with the Easel.js library http://www.createjs.com/#!/EaselJS). The markup is pretty easy if you know ActionScript. It uses a sprite graphic that's in a PNG I created in FireWorks.
Term
Wed, 11/29/2017 - 11:26

Related Codes

Pen ID
Pen ID
Pen ID