墨滴

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = (c.width = window.innerWidth),
    ch = (c.height = window.innerHeight),
    paper = new Image(200,200), 
    ink = new Image(75,100), // Dimensions of the viewable area, not the entire sprite-sheet
    numFrames = 7,
    n=0,
    data={};

function setData(inputX,inputY){
  (n<3)? n++ : n=0;
  data = {
      "frame":0,
      "x":inputX,
      "y":inputY,
      "s":75*n,     
      "scale":.7 + Math.random()*.5,  
      "rotate": ( Math.random() * Math.PI * 2 )
    }
}

function setTween(delay=0){
  TweenMax.to(data, .45, {
      delay:delay,
      frame:numFrames,
      ease:SteppedEase.ease.config(numFrames),
      onUpdate:run,
      onUpdateParams:[data]
    })
}

function drawBg (alpha=1){
  var pattern = ctx.createPattern(paper, "repeat");  
  ctx.globalAlpha = alpha;
  ctx.fillStyle = pattern;//'#fff';
  ctx.fillRect(0, 0, cw, ch);
}

function run ( data ){                          // Thank you @Shaw for help with the random scale+rotation - https://codepen.io/shshaw/
  ctx.setTransform(1, 0, 0, 1, 0, 0);           // Reset the transforms from previous draws
  ctx.globalCompositeOperation = "source-atop"; // Fade old drops by redrawing background texture
  drawBg(.01);                                  // 
  ctx.globalAlpha = 1;                          // Restore globalAlpha that was modified in drawBg()
  ctx.translate( data.x, data.y );              // Translate over to the mouse position to center your scaling & rotation on that point
  ctx.scale(data.scale, data.scale );           // Randomized scale
  ctx.rotate( data.rotate );                    // Randomized rotation in radians
  ctx.translate( -data.x, -data.y );            // Move back to the starting position
  ctx.globalCompositeOperation = ["darken","multiply"][Math.round(Math.random())];
  ctx.drawImage( ink, data.s, data.frame*ink.height, ink.width, ink.height, data.x-33, data.y-(ink.height/2), ink.width, ink.height );
}

window.addEventListener("resize", function(){
  cw = c.width = window.innerWidth;
  ch = c.height = window.innerHeight;
  drawBg();  
});

paper.src = "http://www.jq22.com/tp/780035c7-713e-485c-823d-b0f9c5f3e4ab.jpg";
ink.src = "http://www.jq22.com/tp/17773a57-9a97-4993-9ec8-c5e106bc4eb5.png";

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg