LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click or Touch the Screen.

Click as fast as you can. Try it on a touchscreen - it's even more fun.

CSS
* {
  user-select: none;
  cursor: default;
}

body, html {
  height: 100%;
  font-family: helvetica neue,helvetica,arial,sans-serif;
}

h1, p {
  text-align: center;
  position: relative;
  z-index: 1;
}

h1 {
  padding: 50px 0;
  margin: 0 50px;
  font-size: 30px;
  line-height: 30px;
  font-weight: 200;
}

p {
  font-size: 14px;
  font-weight: 200;
  margin: 0 50px;
  color: #53646e;
}
p em {
  color: #42a6df;
}

#container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#container button {
  padding: 20px;
  border: none;
  background: transparent;
  display: block;
  position: relative;
  z-index: 3;
  margin: 0 auto;
}

.dot {
  height: 2px;
  width: 2px;
  border-radius: 100%;
  position: absolute;
  z-index: 0;
  animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
}

@keyframes sploosh {
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}
JS
// initial animation

$(window).ready(function(){
  setTimeout(function(){
    setTimeout(function(){
      $('#container').append('
') },900); setTimeout(function(){ $('#container').append('
') },600); setTimeout(function(){ $('#container').append('
') },300); setTimeout(function(){ $('#container').append('
') },0); setTimeout(function(){ $('#container .dot').remove(); },2900); },1500); }); // click animation if (Modernizr.touch) { $('#container').on('touchstart',function(e) { var left = e.originalEvent.touches[0].pageX; var top = e.originalEvent.touches[0].pageY; $(this).append('
') setTimeout(function(){ $('#container .dot:first-of-type').remove(); },3000); }); document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); } else { $('#container').on('mousedown',function(e) { var left = e.pageX; var top = e.pageY; $(this).append('
') setTimeout(function(){ $('#container .dot:first-of-type').remove(); },3000); }); }
Host Instantly Drag and Drop Website Builder

 

Description

A similar UI convention is found within Google's Material Design language; I just wanted to riff on that a bit. This doesn't use canvas.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID