A Pen by Austin Riba.

Dripping-WD-42.markdown

Dripping WD-42

My first pen. Just playing around with canvas and TweenMax. This is my first real foray into animation like stuff but I came up with what might be a pretty cool loading screen for a website.

A Pen by Austin Riba on CodePen.

License.

index.html

<canvas id ="dropCanvas" ></canvas>
<div id="rectangle"></div>
<div id="div1">
  <div id="div2"></div>
  <div id="div3">
    WD-42
  </div>
</div>

script.js

this.wd42 = this.wd42 || {};
  (function (){

        Drop.prototype.alpha = 1;
        Drop.prototype.x = 0;
        Drop.prototype.y = 0;
    
      function Drop(x,y, alpha) {
        this.x = x;
        this.y = y;
        this.alpha = alpha;
      }
    
      Drop.prototype.setPos = function (x, y)
      {
        this.x = x;
        this.y = y;
      };
    
      wd42.Drop = Drop;
  }());

  $(document).ready(initialize);
  var ctx, dropArray, canvas, ticks, back;
  function initialize(){
    ticks = 0;
    dropArray = [];
    backg = document.getElementById("rectangle");
    canvas = document.getElementById("dropCanvas");
    canvas.width = window.innerWidth -4;
    canvas.height = window.innerHeight -4;
    ctx = canvas.getContext("2d");
    var easeArray = [Cubic.easeInOut];
    for (var i = 0; i < 100; i++){
      r = Math.random();
      var randAlpha = (r <= 0.3) ? 1 : r;
      var randX = Math.random() * canvas.width;
      var randY = -30 + Math.random()*20;
      var d = new wd42.Drop(randX, randY, randAlpha);
      d.visible = false;
      d.tween = TweenMax.to(d, 2, {y:-30+Math.random()*20, scale:0, alpha:0, onStart:animationStart, onStartParams:[d], ease: Expo.easeIn, delay:Math.random() * 6, yoyo:false, repeat:-1, onRepeat:updatePos, onRepeatParams:[d]});
      dropArray.push(d); 
    }
    TweenMax.ticker.addEventListener("tick", tick);
  }
  function animationStart(d){
    d.visible = true;
  }
  function tick(){
    ticks++;
    var len = dropArray.length;
    ctx.clearRect(0,0, canvas.width, canvas.height);
    for(var i = 0; i < len; i++){
      var d = dropArray[i];
      if(d.visible){
        ctx.beginPath();
        ctx.moveTo(d.x, d.y);
        ctx.bezierCurveTo(d.x-50, d.y+70, d.x+50, d.y+70, d.x, d.y);
        ctx.lineWidth = 1;
        ctx.fillStyle = "rgba(255, 200, 50, " + d.alpha + ")";
        ctx.strokeStyle = "rgba(0,0,0,0.5)";
        ctx.stroke();
        ctx.fill();
      }
      if(ticks > 220 && ticks-220 <= window.innerHeight) {
        backg.style.height = "" + (ticks-220)*2 + "px";
    }
      
    }
  }

  function updatePos(d){
    d.tween.updateTo({y:canvas.height, scale:0}, false);
  }
        

style.css

body
  {
      margin: 0;
  }

canvas
  {
      background-color: #333;
  }
  #rectangle {
    width: 100%;
    height:0px;
    z-idex: 99;
    background: rgb(255, 200, 50);
    position: absolute;
    left:0px;
    bottom: 0px;
  }
  .wd {
    color: rgb(50,135,255);
    font-size: 150px;
    font-family: Helvetica;
    font-weight: 900;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 30%;
    height: 30%;
  }

#div1{
  position: absolute;
  display: inline-block;
  top: 20%;
  bottom: 20%;
  right: 20%;
  left: 20%;
  text-align: center;
}

#div2 {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#div3 {
  position: relative;
  color: rgb(50,135,255);
  font-size: 150px;
  font-family: Helvetica;
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
}