devversion/ChristmasRendering.html

## ChristmasRendering.html
<!DOCTYPE html>
<html>
<head>
  <title>Christmas Rendering</title>

  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <style type="text/css">

    body, html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background: black;
      color: white;
    }

    body {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-content: center;
    }

    .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.7;
    }

    .content {
      padding-top: 150px;
      flex-basis: 80%;
      text-align: center;
    }

    .content h1 {
      font-size: 40px;
      color: #F44336;
      transition: transform 0.2s ease-in;
    }

    .content h1.animate {
      transform: scale(1.1);
    }

    .hidden {
      display: none;
    }
  </style>
</head>
<body>

  <div class="hidden">
    <img id="snowflake" src="snowflake.png"></div>
  </div>

  <canvas class="overlay"></canvas>

  <div class="content">

    <h1>Frohe Weihnachten!</h1>

  </div>


</body>

<script type="text/javascript">

var requestAnimationFrame =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  function(callback) {
    return setTimeout(callback, 1000 / 60);
  };

  var snowflakeIMG = document.getElementById('snowflake');
  var canvas = document.querySelector('canvas');
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = '#FFFFFF';

  var snowflakes = [];

  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < snowflakes.length; i++) {
      var flake = snowflakes[i];

      var y = flake.y + 3;
      var x = flake.x;
      var duped = !!flake.duped;
      var startX = flake.startX;

      if (flake.y === 0) {
        y = 0.1;
        startX = x;
      }

      if (y > 50 && !duped && startX) {
        duped = true;
        snowflakes.push({
          x: startX,
          y: 0,
        });
      }

      if (y > canvas.height + 50) {
        snowflakes.splice(i, 1);
        continue;
      }

      // 20 - 30 = -10
      if (startX == x) {
        x += (Math.random() >= 0.5 ? Math.random() : -Math.random());
      } else if (startX - x > 0) {
        x -= Math.random() * 1.4;
      } else {
        x += Math.random() * 1.4;
      }

      snowflakes[i] = {
        x: x,
        y: y,
        duped: duped,
        startX: startX
      };

      ctx.drawImage(snowflakeIMG, x, y, 9, 9);
    }

    requestAnimationFrame(render);
  }

  var rep = 30;
  for (var x = 1; x <= rep; x++) {
    snowflakes.push({
      x: canvas.width / rep * x,
      y: 0,
    });
  }

  render();

  (function() {

    var text = document.querySelector('h1');

    var state = false;
    setInterval(function() {
      if (state) text.classList.add('animate');
      else text.classList.remove('animate');
      state = !state;
    }, 200);

  })();


</script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Christmas Rendering</title>

	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

	<style type="text/css">

	body, html {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	background: black;
	color: white;
	}

	body {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	}

	.overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.7;
	}

	.content {
	padding-top: 150px;
	flex-basis: 80%;
	text-align: center;
	}

	.content h1 {
	font-size: 40px;
	color: #F44336;
	transition: transform 0.2s ease-in;
	}

	.content h1.animate {
	transform: scale(1.1);
	}

	.hidden {
	display: none;
	}
	</style>
	</head>
	<body>

	<div class="hidden">
	<img id="snowflake" src="snowflake.png"></div>
	</div>

	<canvas class="overlay"></canvas>

	<div class="content">

	<h1>Frohe Weihnachten!</h1>

	</div>


	</body>

	<script type="text/javascript">

	var requestAnimationFrame =
	window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	function(callback) {
	return setTimeout(callback, 1000 / 60);
	};

	var snowflakeIMG = document.getElementById('snowflake');
	var canvas = document.querySelector('canvas');
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;
	var ctx = canvas.getContext("2d");

	ctx.fillStyle = '#FFFFFF';

	var snowflakes = [];

	function render() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	for (var i = 0; i < snowflakes.length; i++) {
	var flake = snowflakes[i];

	var y = flake.y + 3;
	var x = flake.x;
	var duped = !!flake.duped;
	var startX = flake.startX;

	if (flake.y === 0) {
	y = 0.1;
	startX = x;
	}

	if (y > 50 && !duped && startX) {
	duped = true;
	snowflakes.push({
	x: startX,
	y: 0,
	});
	}

	if (y > canvas.height + 50) {
	snowflakes.splice(i, 1);
	continue;
	}

	// 20 - 30 = -10
	if (startX == x) {
	x += (Math.random() >= 0.5 ? Math.random() : -Math.random());
	} else if (startX - x > 0) {
	x -= Math.random() * 1.4;
	} else {
	x += Math.random() * 1.4;
	}

	snowflakes[i] = {
	x: x,
	y: y,
	duped: duped,
	startX: startX
	};

	ctx.drawImage(snowflakeIMG, x, y, 9, 9);
	}

	requestAnimationFrame(render);
	}

	var rep = 30;
	for (var x = 1; x <= rep; x++) {
	snowflakes.push({
	x: canvas.width / rep * x,
	y: 0,
	});
	}

	render();

	(function() {

	var text = document.querySelector('h1');

	var state = false;
	setInterval(function() {
	if (state) text.classList.add('animate');
	else text.classList.remove('animate');
	state = !state;
	}, 200);

	})();



	</script>

	</html>