CODEWITHSUNDEEP
javascriptcanvas
Lukas Niestrat
Lukas Niestrat

Reputation: 755

Animate canvas point

I want to animate my canvas menu background. On click on the menu button I want to fade out the menu with a little parallaxeffect.

I've created a fiddle DEMO

I've tried it with 'requestAnimationFrame' but I don't understand this method. It should look like the menu from this example. But their code I really don't understand...

Sorry, and thanks for helping.

My current JS
function drawCanvas() {
    var $canvas = document.getElementById('nav-bg');
    var windowH = window.innerHeight;

    const fillColor = '#00ffcd';
    const ctx = $canvas.getContext('2d');

    $canvas.height = windowH;
    $canvas.width = $canvas.width;

    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, windowH);
    ctx.lineTo(0, windowH);
    ctx.lineTo(125, 0);
    ctx.closePath();
    ctx.fill();
}

drawCanvas();

Upvotes: 0

Views: 56

Answers (1)

PeterMader
PeterMader

Reputation: 7285

Although I am in Germany, their page downloads (and executes) very slowly. That's why I didn't look at their code and just created something that looks similar to theirs.

I changed a few things (SCSS to CSS) in the following snippet. Also, the menu doesn't collapse when you click the button again. I'm sure you can figure out how to do that.

Moreover, I make use of window.requestAnimationFrame:

const canvas = document.getElementById('nav-bg');
const ctx = canvas.getContext('2d');
const fillColor = '#00ffcd';

const firstStepDuration = 500; // the first step is until the direction of the border changes
const firstStepWidth = 125; // how far should the first step go?
const secondStepDuration = 500;
const secondStepWidth = 250;

let startTime;

function draw () {
  const now = Date.now();
  const time = now - startTime; // time since button click
  const height = canvas.height = window.innerHeight;
  ctx.fillStyle = fillColor;
  
  if (time < firstStepDuration) {
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, height);
    ctx.lineTo(firstStepWidth * time / firstStepDuration, height);
    ctx.lineTo(time / firstStepDuration * firstStepWidth - firstStepWidth, 0);
    ctx.closePath();
    ctx.fill();
  } else {
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, height);
    ctx.lineTo(firstStepWidth, height);
    ctx.lineTo((time - firstStepDuration) / secondStepDuration * secondStepWidth, 0);
    ctx.closePath();
    ctx.fill();
  }
  
  if (time < firstStepDuration + secondStepDuration) {
    // call draw again in the next animation frame
    window.requestAnimationFrame(draw);
  }
};

document.querySelector('.nav-button').addEventListener('click', function () {
  startTime = Date.now();
  draw();
});
.nav-button {
    background-color: #00ffcd;
    border: 0;
    cursor: pointer;
    float: left;
    height: 60px;
    outline: 0;
    padding: 0;
    position: fixed;
    left: 25px;
    top: 25px;
    width: 60px;
    z-index: 99999;
}

span.icon-bar {
  background-color: black;
  display: block;
  height: 5px;
  margin-left: 15px;
  margin-top: 5px;
  width: 30px;
}

span.icon-bar:first-child {
  margin-top: 0;
}

.nav-button:hover > span.icon-bar.middle {
  margin-left: 10px;
}

#navigation {
  backface-visibility: hidden;
  bottom: 0;
  display: block;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 500;
}

#nav-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center center;
}
<header>
  <button class="nav-button">
    <span class="icon-bar top"></span>
    <span class="icon-bar middle"></span>
    <span class="icon-bar bottom"></span>
  </button>
</header>
<div id="navigation">
  <canvas id="nav-bg" width="550" height="750"></canvas>
</div>

If you want further explanation, feel free to ask!

Upvotes: 1

Related Questions