Skip to content

Instantly share code, notes, and snippets.

@tiberiomarco01
Created January 12, 2016 17:36
Show Gist options
  • Save tiberiomarco01/0af7f3fb6b1a64cac725 to your computer and use it in GitHub Desktop.
Save tiberiomarco01/0af7f3fb6b1a64cac725 to your computer and use it in GitHub Desktop.
Merry Christmas, Codepen!
<!-- 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>
$(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();
};
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment