Skip to content

Instantly share code, notes, and snippets.

@FeipingHunag

FeipingHunag/Days Until Christmas.markdown

Created December 24, 2015 04:05
Show Gist options
  • Save FeipingHunag/b395b3d71e5e327b8d9b to your computer and use it in GitHub Desktop.
Save FeipingHunag/b395b3d71e5e327b8d9b to your computer and use it in GitHub Desktop.
Download ZIP
Days Until Christmas
Raw
Days Until Christmas.markdown

Days Until Christmas

Apples 12 Days of Christmas style created using html5 canvas and css3, and instead counting down the days until christmas :D

A Pen by Lennart Hase on CodePen.

License.

Raw
index.html
<canvas></canvas>
<div class="loop"></div>
<div class="no" id="no">X</div>
<div class="days" id="days">DAYS</div>
<div class="line"></div>
<div class="text" id="text">UNTIL CHRISTMAS</div>
Raw
script.js
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var w = window.innerWidth, h = window.outerHeight;
canvas.width = w;
canvas.height = h;
var circles = 60;
var circle_array = [];
function init(){
ctx.fillStyle = "#100d04";
ctx.rect(this.x,this.y,w,h);
ctx.fill();
for(var i=0;i<circles;i++){
var c = new circle();
circle_array.push(c);
}
var d = new Date();
var day = d.getDate();
var days_to_go = 25 - day;
if(d.getMonth() != 11){
days_to_go = -1;
}
if(days_to_go == 0){
// IT'S CHRISTMAS
document.getElementById("no").innerHTML = "X";
document.getElementById("days").innerHTML = "CHRISTMAS";
document.getElementById("days").style.left = "-webkit-calc(50% - 240px)";
document.getElementById("text").innerHTML = "IS HERE";
document.getElementById("text").style.left = "-webkit-calc(50% - 40px)";
}
else if(days_to_go < 0){
// IT'S CHRISTMAS
document.getElementById("no").innerHTML = "X";
document.getElementById("days").innerHTML = "CHRISTMAS";
document.getElementById("days").style.left = "-webkit-calc(50% - 240px)";
document.getElementById("text").innerHTML = "HAS PAST, COME BACK NEXT YEAR";
document.getElementById("text").style.left = "-webkit-calc(50% - 240px)";
}
else{
document.getElementById("no").innerHTML = ""+days_to_go+"";
}
}
function circle(){
this.x = Math.random()*w;
this.y = Math.random()*h;
this.r = 0;
this.r_max = Math.floor(Math.random() * 55)+15;
this.opacity = Math.floor(Math.random() * 1)+0.2;
this.draw = function(){
ctx.fillStyle = "hsla(48,97%,59%,"+this.opacity+")";
ctx.beginPath();
ctx.arc(this.x,this.y,this.r, 0, Math.PI*2, false);
ctx.fill();
}
}
function drawscene(){
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.rect(0,0,w,h);
ctx.fill();
for(var i=0;i<circle_array.length;i++){
if(circle_array[i].r>=circle_array[i].r_max){
if(circle_array[i].opacity<0.01){
circle_array[i] = new circle();
}
else{
circle_array[i].opacity -= 0.01;
}
}
else{
circle_array[i].r += Math.random()*0.3;
}
circle_array[i].draw();
}
}
function animloop() {
drawscene();
requestAnimFrame(animloop);
}
init();
animloop();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body{
margin: 0;
padding: 0;
background: #100d04;
overflow: hidden;
}
canvas{
-webkit-filter: blur(8px);
}
div.no{
position: absolute;
top: -webkit-calc(50% - 100px);
left: -webkit-calc(50% - 50px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 2px solid #e1c15c;
border-radius: 5px;
font-family: Arial Black;
font-size: 72px;
width: 130px;
height: 100px;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
div.days{
position: absolute;
top: -webkit-calc(50% - 10px);
left: -webkit-calc(50% - 95px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Arial Black;
font-size: 82px;
}
div.line{
position: absolute;
top: -webkit-calc(50% + 90px);
left: -webkit-calc(50% - 140px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
width: 350px;
height: 1px;
}
div.text{
position: absolute;
top: -webkit-calc(50% + 100px);
left: -webkit-calc(50% - 110px);
background: rgb(163,114,46); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(163,114,46,1) 0%, rgba(208,157,47,1) 0%, rgba(255,254,170,1) 67%, rgba(254,218,79,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(163,114,46,1)), color-stop(0%,rgba(208,157,47,1)), color-stop(67%,rgba(255,254,170,1)), color-stop(99%,rgba(254,218,79,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* IE10+ */
background: linear-gradient(135deg, rgba(163,114,46,1) 0%,rgba(208,157,47,1) 0%,rgba(255,254,170,1) 67%,rgba(254,218,79,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3722e', endColorstr='#feda4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Arial;
font-size: 32px;
}
div.loop{
position: absolute;
top: -webkit-calc(50% - 134px);
left: -webkit-calc(50% + 12px);
border: 2px solid #e1c15c;
border-radius: 0 50px 50px 50px;
width: 30px;
height: 30px;
-webkit-transform: rotate(265deg);
}
div.loop:after{
content: '';
position: absolute;
top: -31px;
left: 0px;
border: 2px solid #e1c15c;
border-radius: 0 50px 50px 50px;
width: 30px;
height: 30px;
-webkit-transform: rotate(280deg);
}
div.loop:before{
content: '';
position: absolute;
top: -8px;
left: -16px;
border-left: 2px solid #e1c15c;
border-bottom: 2px solid #e1c15c;
width: 10px;
height: 10px;
-webkit-transform: rotate(230deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment