Skip to content

Instantly share code, notes, and snippets.

@joashp

joashp/Merry-Christmas.markdown

Last active August 29, 2015 14:12
Show Gist options
  • Save joashp/8acf358ac99bcc18e264 to your computer and use it in GitHub Desktop.
Save joashp/8acf358ac99bcc18e264 to your computer and use it in GitHub Desktop.
Download ZIP
Merry Christmas
Raw
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>
Raw
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();
};
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment