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

Revisions

  1. joashp revised this gist Dec 23, 2014. 2 changed files with 4 additions and 5 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,8 @@
    <div class="to">
    <h1 class="headline">Merry Christmas!</h1>
    <div class="pull-right">
    <div class="xmas-ornament red"></div>
    <div class="xmas-ornament blue"></div>
    <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">
    5 changes: 2 additions & 3 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    height: 100%;
    width: 100%;
    position: relative;
    background: url("http://christmasquoteswallpaper.com/wp-content/uploads/2014/11/Houses-Light-Pictures-of-Merry-Christmas.jpg") no-repeat 0 0/cover;
    background: url("http://25.media.tumblr.com/5503625b2461836f3e84669ee90f83ea/tumblr_mw7rdbwlI61qgd106o1_500.jpg") no-repeat 0 0/cover;
    }

    .xmas .to {
    @@ -14,7 +14,6 @@
    }
    .xmas .to div {
    color: #ffffff;
    line-height: 0.5em;
    margin-bottom: 5px;
    }

    @@ -170,7 +169,7 @@
    }

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

    .xmas #xmas {
  2. joashp created this gist Dec 23, 2014.
    7 changes: 7 additions & 0 deletions Merry-Christmas.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Merry Christmas
    ---------------


    A [Pen](http://codepen.io/joashp/pen/PwGPBo) by [Joash](http://codepen.io/joashp) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/joashp/pen/PwGPBo/license).
    15 changes: 15 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <section class="xmas">
    <div class="to">
    <h1 class="headline">Merry Christmas!</h1>
    <div class="pull-right">
    <div class="xmas-ornament red"></div>
    <div class="xmas-ornament blue"></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>
    128 changes: 128 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    $(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();
    };
    208 changes: 208 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,208 @@
    .xmas {
    height: 100%;
    width: 100%;
    position: relative;
    background: url("http://christmasquoteswallpaper.com/wp-content/uploads/2014/11/Houses-Light-Pictures-of-Merry-Christmas.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;
    line-height: 0.5em;
    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: 400px;
    }

    .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;
    }