LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

input {
  position: absolute;
  
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

input.grow {
    animation-name: grow;
}

@keyframes grow {
  0%     { transform: scale(1);       }
  20%    { transform: scale(2.5);     }
  100%   { transform: scale(1);       }
}
JS
var RES_X = 20;
var RES_Y = 20;
var SIZE = 22;

// super laggy on mobile devices so ease up the res
if( /iphone|ipad|android/ig.test( navigator.userAgent ) ) {
  RES_X = 10;
  RES_Y = 10;
  SIZE = 25;
}

var entities = [];

var wrapper = document.createElement( 'div' );
wrapper.style.width = ( RES_X * SIZE ) + 'px';
wrapper.style.height = ( RES_Y * SIZE ) + 'px';
document.body.appendChild( wrapper );

for( var x = 0; x < RES_X; x++ ) {
  for( var y = 0; y < RES_Y; y++ ) {
    var el = document.createElement( 'input' );
    el.setAttribute( 'type', 'checkbox' );
    wrapper.appendChild( el );
    
    var entity = {
      element: el,
      x: x * SIZE,
      y: y * SIZE
    }
    
    el.style.left = entity.x + 'px';
    el.style.top = entity.y + 'px';
    el.addEventListener( 'change', this.toggle.bind( this, entity ) );
    
    entities.push( entity );
  }
}

function toggle( targetEntity ) {
  
  var checked = targetEntity.element.checked;
  
  entities.forEach( function( entity ) {

    var dx = targetEntity.x - entity.x;
    var dy = targetEntity.y - entity.y;
    var distance = Math.sqrt( dx * dx + dy * dy );
    
    setTimeout( function() {
      entity.element.checked = checked;
      
      // re-run the animation, reading offsetWidth forces reflow
      entity.element.className = '';
      entity.element.offsetWidth;
      entity.element.className = 'grow';
    }, Math.round( distance * 1.8 ) );
    
  } );
  
}

setTimeout( function() {
  entities[ 0 ].element.checked = true;
  toggle( entities[ 0 ] );
}, 500 );
Host Instantly Drag and Drop Website Builder

 

Description

Here's a thing. With checkboxes. Because why not.
Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID
Pen ID