LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body { height: 100%; width: 100%; margin: 0;}
#whale {height: 99.5%; width: 100%;}
JS
var whale = (function () {

  var element = document.getElementById("whale")
    , width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    , height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    , fps = 30
    , easy = 6
    , maxspeed = 150
    , delay = 15
    , mouse = {x: width/2, y: height/2}
    , defs
    , parts
  ;

defs = '';
  parts = [
    {x:mouse.x, y:mouse.y, z:43, data:''},
    {x:mouse.x, y:mouse.y, z:42, data:''},
    {x:mouse.x, y:mouse.y, z:41, data:''},
    {x:mouse.x, y:mouse.y, z:40, data:''},
    {x:mouse.x, y:mouse.y, z:39, data:''},
    {x:mouse.x, y:mouse.y, z:38, data:''},
    {x:mouse.x, y:mouse.y, z:37, data:''},
    {x:mouse.x, y:mouse.y, z:36, data:''},
    {x:mouse.x, y:mouse.y, z:35, data:''},
    {x:mouse.x, y:mouse.y, z:34, data:''},
    {x:mouse.x, y:mouse.y, z:33, data:''},
    {x:mouse.x, y:mouse.y, z:32, data:''},
    {x:mouse.x, y:mouse.y, z:31, data:''},
    {x:mouse.x, y:mouse.y, z:30, data:''},
    {x:mouse.x, y:mouse.y, z:29, data:''},
    {x:mouse.x, y:mouse.y, z:28, data:''},
    {x:mouse.x, y:mouse.y, z:27, data:''},
    {x:mouse.x, y:mouse.y, z:26, data:''},
    {x:mouse.x, y:mouse.y, z:25, data:''},
    {x:mouse.x, y:mouse.y, z:24, data:''},
    {x:mouse.x, y:mouse.y, z:23, data:''},
    {x:mouse.x, y:mouse.y, z:22, data:''},
    {x:mouse.x, y:mouse.y, z:21, data:''},
    {x:mouse.x, y:mouse.y, z:20, data:''},
    {x:mouse.x, y:mouse.y, z:19, data:''},
    {x:mouse.x, y:mouse.y, z:18, data:''},
    {x:mouse.x, y:mouse.y, z:17, data:''},
    {x:mouse.x, y:mouse.y, z:16, data:''},
    {x:mouse.x, y:mouse.y, z:15, data:''},
    {x:mouse.x, y:mouse.y, z:14, data:''},
    {x:mouse.x, y:mouse.y, z:13, data:''},
    {x:mouse.x, y:mouse.y, z:12, data:''},
    {x:mouse.x, y:mouse.y, z:11, data:''},
    {x:mouse.x, y:mouse.y, z:10, data:''},
    {x:mouse.x, y:mouse.y, z:9, data:''},
    {x:mouse.x, y:mouse.y, z:8, data:''},
    {x:mouse.x, y:mouse.y, z:7, data:''},
    {x:mouse.x, y:mouse.y, z:6, data:''},
    {x:mouse.x, y:mouse.y, z:5, data:''},
    {x:mouse.x, y:mouse.y, z:4, data:''},
    {x:mouse.x, y:mouse.y, z:3, data:''},
    {x:mouse.x, y:mouse.y, z:2, data:''},
    {x:mouse.x, y:mouse.y, z:1, data:''},
    {x:mouse.x, y:mouse.y, z:0, data:''}
  ]

  function init() {
    document.addEventListener('mousemove', mousemove);
    setInterval(loop, 1000/fps);
  }

  function mousemove(e) {
    mouse = {x: e.clientX, y: e.clientY}
  }

  function loop() {
    for (var i = 0; i < parts.length; i++) {
      var params = { mouse:mouse, part:parts[i] };
      setTimeout(transform, parts[i].z*delay, params );
    };
    element.innerHTML = svg();
  }

  function svg(){
    var svg = '';
    for (var i = 0; i < parts.length; i++) {
      svg += '';
      svg += parts[i].data;
      svg += '';
    };
    svg += defs;
    svg += '';
    return svg;
  }

  function transform(params) {
    params.part.x = definemaxspeed(params.mouse.x - params.part.x ) / easy + params.part.x ;
    params.part.y = definemaxspeed(params.mouse.y - params.part.y ) / easy + params.part.y ;
  }

  function definemaxspeed(speed) {
    if (speed > 0 && speed > maxspeed) return maxspeed;
    if (speed < 0 && speed < -maxspeed) return -maxspeed;
    return speed;
  }

  return {init: init};
})();

whale.init();

Description

Adapted from the following Flash: http://img0.liveinternet.ru/images/attach/c/5//3970/3970473_sprite198.swf
Term
Mon, 11/27/2017 - 21:29

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv