Skip to content

Instantly share code, notes, and snippets.

@jo-fu

jo-fu/index.html

Last active October 30, 2019 12:58
Show Gist options
  • Save jo-fu/a30ee20a21857867c3f8 to your computer and use it in GitHub Desktop.
Save jo-fu/a30ee20a21857867c3f8 to your computer and use it in GitHub Desktop.
Download ZIP
Advent Calendar
Raw
index.html
<html>
<head>
<title>Adventskalender</title>
<link href='https://fonts.googleapis.com/css?family=Mountains+of+Christmas:400,700' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Raw
script.js
var n = 24
var today = checkTime()
function openDoor(t){
// Clicked door's day
var day = parseInt(t.split("_")[1])
// If it's not the day yet - don't open
if(today>=day) $("#"+t).toggleClass("opendoor")
else alert("meep")
}
function checkTime(t){
var start = 1448928000; // 1.Dez
var oneday = 24*60*60;
var now = parseInt(new Date().getTime()/1000);
var today = parseInt((now-start)/oneday) + 1
return today;
}
function createCalendar(){
for(var i=1; i<=n; i++){
var door = "<div class='day'>"
// Load content only if day is there yet
if(i>today) door += "<div id='content_" + i + "' class='content' style='background-image:url(http://officialhuskylovers.com/wp-content/uploads/2015/03/Are-you-Serious.jpg)'></div>"
else door += "<div id='content_" + i + "' class='content' style='background-image:url(http://ak-hdl.buzzfed.com/static/2013-11/enhanced/webdr01/11/11/enhanced-buzz-628-1384188929-1.jpg)'></div>"
// Door
door += "<div id='tuer_" + i + "' class='tuerchen' onclick='openDoor(this.id)'>"+
"<p>" + i + "</p>"+
"</div>" +
"</div>";
$("body").append(door)
}
}
$(document).ready(function() {
console.log(today)
createCalendar()
})
Raw
style.css
body {
font-family: 'Mountains of Christmas', cursive; }
.day {
position: relative;
width: 16.6%;
height: 25%;
float: left;
border: 5px solid #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.day .tuerchen {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: brown; }
.day .tuerchen p {
font-size: 50px;
color: white;
font-weight: bold;
position: absolute;
top: 50%;
margin-top: -0.5em;
width: 100%;
text-align: center;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out; }
.day .opendoor {
-webkit-animation: opendoor 2s normal forwards ease-in-out;
animation: opendoor 2s normal forwards ease-in-out; }
.day .opendoor p {
opacity: 0; }
.day .content {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #765440; }
@-webkit-keyframes opendoor {
0% {
-webkit-transform: perspective(1500) rotateY(0deg);
-webkit-transform-origin: 0% 50%; }
100% {
-webkit-transform: perspective(1500) rotateY(-92deg);
-webkit-transform-origin: 0% 50%; } }
@-moz-keyframes opendoor {
0% {
width: 100%; }
100% {
width: 0; } }
@-o-keyframes opendoor {
0% {
width: 100%; }
100% {
width: 0; } }
@keyframes opendoor {
0% {
-webkit-transform: perspective(1500) rotateY(0deg);
transform: perspective(1500) rotateY(0deg);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%; }
100% {
-webkit-transform: perspective(1500) rotateY(-92deg);
transform: perspective(1500) rotateY(-92deg);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%; } }
/*# sourceMappingURL=style.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment