Ikea @ Midnight Clock - see you then

In this example below you will see how to do a Ikea @ Midnight Clock - see you then with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sammurphey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sammurphey ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ikea @ Midnight Clock - see you then</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="oval">
  <h1 id="time">12:00</h1>
</section>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
<p class="confetti"></p>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sammurphey/ikea-midnight-clock-see-you-then-gaYyxZ */
html, body {
  margin: 0em;
  background: rgb(35,47,132);
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  overflow: hidden;
}

#oval {
  display: block;
  width: 80vw;
  height: 30vw;
  position: fixed;
  top: 50%;
  margin-top: -15vw;
  background: rgb(255,210,0);
  margin-left: 10vw;
  border-radius: 50%;
  z-index: 1
}
#time {
  text-align: center;
  color: rgb(35,47,132);
  font-size: 25vw;
  line-height: 30vw;
  width: 100%;
  height: 30vw;
  position: fixed;
  top: 50%;
  left: 0%;
  margin-top: -15vw;
  z-index: 2
}
.confetti {
  display: block;
  float: left;
  background: red;
  width: 2em;
  height: 1em;
  margin: -20vh 0vh 0vh 0vh;
  -webkit-transition: all ease-in-out 5s;
-moz-transition: all ease-in-out 5s;
-o-transition: all ease-in-out 5s;
transition: all ease-in-out 5s;
  z-index: 999;
}


.confetti:nth-child(5n+1) {
  background: yellow;
}
.confetti:nth-child(5n+2) {
  background: green;
}
.confetti:nth-child(5n+3) {
  background: blue;
}
.confetti:nth-child(5n+4) {
  background: purple;
}
.confetti:nth-child(8n+0) {
    -webkit-transition: all ease-in-out 4s;
-moz-transition: all ease-in-out 4s;
-o-transition: all ease-in-out 4s;
transition: all ease-in-out 4s;
}
.confetti:nth-child(8n+1) {
    -webkit-transition: all ease-in-out 4.8s;
-moz-transition: all ease-in-out 4.8s;
-o-transition: all ease-in-out 4.8s;
transition: all ease-in-out 4.8s;
}
.confetti:nth-child(8n+2) {
    -webkit-transition: all ease-in-out 4.2s;
-moz-transition: all ease-in-out 3.2s;
-o-transition: all ease-in-out 3.2s;
transition: all ease-in-out 3.2s;
}
.confetti:nth-child(8n+3) {
    -webkit-transition: all ease-in-out 4.6s;
-moz-transition: all ease-in-out 4.6s;
-o-transition: all ease-in-out 4.6s;
transition: all ease-in-out 4.6s;
}
.confetti:nth-child(8n+4) {
    -webkit-transition: all ease-in-out 5.4s;
-moz-transition: all ease-in-out 5.4s;
-o-transition: all ease-in-out 5.4s;
transition: all ease-in-out 5.4s;
}
.confetti:nth-child(8n+5) {
    -webkit-transition: all ease-in-out 5s;
-moz-transition: all ease-in-out 5s;
-o-transition: all ease-in-out 5s;
transition: all ease-in-out 5s;
}
.confetti:nth-child(8n+6) {
    -webkit-transition: all ease-in-out 6s;
-moz-transition: all ease-in-out 6s;
-o-transition: all ease-in-out 6s;
transition: all ease-in-out 6s;
}
.confetti:nth-child(8n+7) {
    -webkit-transition: all ease-in-out 5s;
-moz-transition: all ease-in-out 3.5s;
-o-transition: all ease-in-out 3.5s;
transition: all ease-in-out 3.5s;
}



@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to { 
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to { 
    -o-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}
.confetti
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         2s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
  -moz-animation-name:             rotate; 
    -moz-animation-duration:         2s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;
  -o-animation-name:             rotate; 
    -o-animation-duration:         2s; 
    -o-animation-iteration-count:  infinite;
    -o-animation-timing-function: linear;
  -ms-animation-name:             rotate; 
    -ms-animation-duration:         2s; 
    -ms-animation-iteration-count:  infinite;
    -ms-animation-timing-function: linear;
  animation-name:             rotate; 
    animation-duration:         2s; 
    animation-iteration-count:  infinite;
    animation-timing-function: linear;
    }

/*Downloaded from https://www.codeseek.co/sammurphey/ikea-midnight-clock-see-you-then-gaYyxZ */
function updateTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var displayhours = currentTime.getHours();
        var partytime = false;
        var minutes = currentTime.getMinutes();
        if (minutes < 10){
            minutes = "0" + minutes;
        } if (hours > 12) {
          displayhours = hours - 12;
        } 
        
  
        var v = displayhours + ":" + minutes;
        setTimeout("updateTime()",1000);
        document.getElementById('time').innerHTML=v;
  if(hours == 24 && minutes == 0) {
    throwConfetti();
  }
}
function throwConfetti() { var elements = document.getElementsByClassName('confetti');
for(var i=0; i<elements.length; i++) { 
  elements[i].style.margin='102vh 0vh 0vh 0vh';
}}
    updateTime();

Comments