Merry Christmas, Codepen!

index.html

<!-- Xmas Wrapper -->
<section class="xmas">

	<div class="to">
		<div>Dear</div>
		<img class="client-logo to-name" src="http://craftedbygc.com/images/xmas/codepen.png">
	</div>
		
	<!-- Merry Xmas message container -->
	<div class="xmas-message"></div>

	<div class="from">
		<div>from</div>
		<a class="gc-link small-title from-name" href="http://craftedbygc.com">Green Chameleon</a>
	</div>
	
	<!-- Let it snow! -->
	<canvas id="xmas"></canvas>
</section>

Merry Christmas, Codepen!.markdown

Merry Christmas, Codepen!

A little greeting from here at Green Chameleon Design to all you at Codepen. Can also be customised at http://craftedbygc.com/merryxmas-codepen by changing the url to "craftedbygc.com/merryxmas-{whatever-you-like}"

Based on the "It's snowing" pen (http://codepen.io/loktar00/pen/CHpGo) by Jason (http://codepen.io/loktar00/)

A Pen by Green Chameleon on CodePen.

License.

script.js

$(document).ready(function(){

  initLetItSnow();
});

// Init Christmas! \o/
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 / 2;
	                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();
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

$color1: #ffffff;
$color2: #1cff94;
$color3: #1d2123;

.xmas {
	height: 100%;
	width: 100%;
	position: relative;
	background: url('http://craftedbygc.com/images/xmas-large.jpg') no-repeat 0 0 / cover;

	.to {
		position: absolute;
		top: 30px;
		width: 100%;
		text-align: center;
		z-index: 3;

		div {
			font-family: "quimby-mayoral", sans-serif;
			color: $color1;
			font-size: 40px;
			line-height: 0.5em;
			margin-bottom: 5px;
		}

		.to-name {
			font-size: 24px;
		}

		.client-logo {
			display: block;
			width: auto;
			max-height: 100px;
			max-width: 250px;
			margin: 10px auto 0;
		}
	}

	// The graphic
	.xmas-message {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 2;
		@include translate(-50%, -50%);
		width: calc(90% - 6rem);
		height: calc(100% - 12rem);
		margin: 0 auto;
		background: url(http://craftedbygc.com/images/merryxmas.png) no-repeat 50% 50% / contain;
	}

	.from {
		position: absolute;
		bottom: 40px;
		width: 100%;
		z-index: 3;
		text-align: center;

		div {
			font-family: "quimby-mayoral", sans-serif;
			color: $color1;
			font-size: 40px;
			margin-bottom: 10px;
		}

		.gc-link {
			display: inline-block;
        font-family: "brandon-grotesque", sans-serif;
			font-size: 24px;
        color: $color1;
			transition: 400ms ease;
        text-decoration: none;
        text-transform: uppercase;
      
			&:hover {
				color: $color2;
			}
		}
	}
	
	// Let it snow!
	#xmas {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 2;
	}
}