Merry Christmas

index.html

<section class="xmas">
  <div class="to">
    <h1 class="headline">Merry Christmas!</h1>
    <div class="pull-right">
      <div class="xmas-ornament red"><br/><br/><br/>Happy <br/>New Year </div>
      <div class="xmas-ornament blue"><br/><br/><br/>2015</div>
    </div>
   </div>
    <div class="from">
		<div>from</div>
		<a class="jp-link small-title from-name" href="http://joashpereira.com">Joash</a>
	</div>
    <canvas id="xmas">
	  </canvas>
</section>

Merry-Christmas.markdown

Merry Christmas

A Pen by Joash on CodePen.

License.

script.js

$(document).ready(function(){

  initLetItSnow();
});


var initLetItSnow = function(){

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

	var flakes = [],
	    canvas = document.getElementById("xmas"),
	    ctx = canvas.getContext("2d"),
	    mX = -100,
	    mY = -100;

	    if( $(window).width() < 999 ){
	    	var flakeCount = 125;
	    } else {
	    	var flakeCount = 450;
	    }

	    canvas.width = window.innerWidth;
	    canvas.height = window.innerHeight;

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

	    for (var i = 0; i < flakeCount; i++) {
	        var flake = flakes[i],
	            x = mX,
	            y = mY,
	            minDist = 250,
	            x2 = flake.x,
	            y2 = flake.y;

	        var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
	            dx = x2 - x,
	            dy = y2 - y;

	        if (dist < minDist) {
	            var force = minDist / (dist * dist),
	                xcomp = (x - x2) / dist,
	                ycomp = (y - y2) / dist,
	                deltaV = force;

	            flake.velX -= deltaV * xcomp;
	            flake.velY -= deltaV * ycomp;

	        } else {
	            flake.velX *= .98;
	            if (flake.velY <= flake.speed) {
	                flake.velY = flake.speed
	            }
	            flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
	        }

	        ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
	        flake.y += flake.velY;
	        flake.x += flake.velX;
	            
	        if (flake.y >= canvas.height || flake.y <= 0) {
	            reset(flake);
	        }

	        if (flake.x >= canvas.width || flake.x <= 0) {
	            reset(flake);
	        }

	        ctx.beginPath();
	        ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
	        ctx.fill();
	    }
	    requestAnimationFrame(snow);
	};

	function reset(flake) {
	    flake.x = Math.floor(Math.random() * canvas.width);
	    flake.y = 0;
	    flake.size = (Math.random() * 3) + 2;
	    flake.speed = (Math.random() * 1) + 0.5;
	    flake.velY = flake.speed;
	    flake.velX = 0;
	    flake.opacity = (Math.random() * 0.5) + 0.3;
	}

	function init() {
	    for (var i = 0; i < flakeCount; i++) {
	        var x = Math.floor(Math.random() * canvas.width),
	            y = Math.floor(Math.random() * canvas.height),
	            size = (Math.random() * 3) + 4,
	            speed = (Math.random() * 1) + 0.5,
	            opacity = (Math.random() * 0.5) + 0.3;

	        flakes.push({
	            speed: speed,
	            velY: speed,
	            velX: 0,
	            x: x,
	            y: y,
	            size: size,
	            stepSize: (Math.random()) / 160,
	            step: 0,
	            opacity: opacity
	        });
	    }

	    snow();
	};

	canvas.addEventListener("mousemove", function(e) {
	    mX = e.clientX,
	    mY = e.clientY
	});

	window.addEventListener("resize",function(){
	    canvas.width = window.innerWidth;
	    canvas.height = window.innerHeight;
	})

	init();
};

style.css

.xmas {
  height: 100%;
  width: 100%;
  position: relative;
  background: url("http://25.media.tumblr.com/5503625b2461836f3e84669ee90f83ea/tumblr_mw7rdbwlI61qgd106o1_500.jpg") no-repeat 0 0/cover;
}

.xmas .to {
  position: absolute;
  top: 30px;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.xmas .to div {
  color: #ffffff;
  margin-bottom: 5px;
}

@-webkit-keyframes hover {
  0% {
    transform: translate3d(0, 0, 0);
    color: #b81313;
  }
  50% {
    transform: translate3d(0, -0.2em, 0);
    color: #db3e3e;
  }
  100% {
    transform: translate3d(0, 0, 0);
    color: #b81313;
  }
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0px 0px 0.3em rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0px 0px 0.3em rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0px 0px 0.3em rgba(255, 255, 255, 0.8);
  }
}

.headline {
  margin: 0px !important;
  color: #b81313;
  font-family: 'Berkshire Swash', cursive;
  font-weight: normal;
  font-size: 5em;
  text-align: center;
  text-shadow: 0 .05em .1em #fff;
  animation-name: hover;
  -webkit-animation-name: hover;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-duration: 3.5s;
  -webkit-animation-duration: 3.5s;
}

@-webkit-keyframes animationFrames{
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(15deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes animationFrames{
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(15deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.xmas-ornament {
  float: right;
  width: 8em;
  height: 8em;
  margin: 5em 0 0 2em;
  border-radius: 50%;
  box-shadow: inset 10px 10px 20px rgba(255,255,255,.5), 15px 15px 65px rgba(0,0,0,.5);
  animation: animationFrames ease-in-out 3s;
  -webkit-animation: animationFrames ease-in-out 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  transform-origin: 50% -2em;
  float: left;
}
.xmas-ornament::after {
  position: absolute;
  right: 8%;
  bottom: 8%;
  display: block;
  width: 70%;
  height: 70%;
  content: '';
  border-radius: 50%;
  border-color: rgba(255,255,255,.06);
  border-style: none solid solid none;
  border-width: 2px;
  background-image: -webkit-radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
  background-image: -moz-radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
  background-image: -ms-radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
  background-image: -o-radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
  background-image: radial-gradient(70px 70px, circle closest-corner, rgba(255,255,255,.005), rgba(255,255,255,.15));
}
.xmas-ornament::before {
  position: absolute;
  top: -2em;
  left: 50%;
  margin-left: -2em;
  display: block;
  width: 4em;
  height: 2.3em;
  content: '';
  background: silver;
  background: linear-gradient(to right, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
  border-radius: .3em;
}
.red {
  background: red;
  background-image: -webkit-radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
  background-image: -moz-radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
  background-image: -ms-radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
  background-image: -o-radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
  background-image: radial-gradient(70px 70px, circle farthest-corner, rgb(255,0,0), rgb(127,0,0));
}
.blue {
  background: blue;
  background-image: -webkit-radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
  background-image: -moz-radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
  background-image: -ms-radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
  background-image: -o-radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
  background-image: radial-gradient(70px 70px, circle farthest-corner, rgb(0,0,255), rgb(0,0,127));
}

.pull-right {
  margin-left: 30px;
}

.xmas #xmas {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.xmas .from {
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 3;
  text-align: center;
}
.xmas .from div {
  font-family: "Berkshire Swash", sans-serif;
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 10px;
}
.xmas .from .jp-link {
  display: inline-block;
  font-family: 'Berkshire Swash', sans-serif;
  font-size: 40px;
  color: #ffffff;
  -webkit-transition: 400ms ease;
          transition: 400ms ease;
  text-decoration: none;
  text-transform: uppercase;
}
.xmas .from .jp-link:hover {
  color: #e74c3c;
}