LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CLICK & DRAG

RESET
CSS
*,
*::after,
*::before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body {
  perspective: 2000px;
  height: 100vh;
  width: 100vw;
  margin: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Roboto';
  font-weight: 300
}
h1{
  font-familt:'Catamaran';
  font-weight:100;
  text-align:center
}
#container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.postit{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:5%;
  margin:-50px 0 0 -50px;
}
#reset{
  position:absolute;
  bottom:3px;right:3px;
  height:30px;
  line-height:30px;
  padding:0 10px;
  color:#fff;
  background:rgba(0,0,0,0.5);
  z-index:100;
  cursor:pointer;
}
JS
var paint = false,
    counter = 0;
$('#container')
  .mousedown(function(){
    paint = true;
  })
  .mouseup(function(){
    paint = false;
  })
  .mousemove(function(e){
    if(paint){
    W = $('#container').width();
    H = $('#container').height();
    x = e.pageX;
    y = e.pageY;
    X = Math.floor(x/W * 100);
    Y = Math.floor(y/H * 100);
    counter = (counter < 360) ? counter+1 : 0;
    h = counter;
    //h = Math.floor((X+Y) * 360 / 200);
    $('#container').append('
'); } }); $('#reset').click(function(){ $("#container").empty(); });
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv