API tools faq
paste
monoteen

CB_index.html

monoteen
Oct 22nd, 2014
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.  
  6.         <meta charset="UTF-8">
  7.  
  8.         <title>뭐 왜 뭐</title>
  9.  
  10.         <meta name="description" content="">
  11.         <meta name="author" content="Hakim El Hattab">
  12.  
  13.         <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
  14.  
  15.     </head>
  16.  
  17.     <body>
  18.  
  19.         <script>
  20.             var RES_X = 20;
  21.             var RES_Y = 20;
  22.             var SIZE = 22;
  23.  
  24.             if( /iphone|ipad|android/ig.test( navigator.userAgent ) ) {
  25.                 RES_X = 10;
  26.                 RES_Y = 10;
  27.                 SIZE = 25;
  28.             }
  29.  
  30.             var entities = [];
  31.  
  32.             var wrapper = document.createElement( 'div' );
  33.             wrapper.className = 'wrapper';
  34.             wrapper.style.width = ( RES_X * SIZE ) + 'px';
  35.             wrapper.style.height = ( RES_Y * SIZE ) + 'px';
  36.             document.body.appendChild( wrapper );
  37.  
  38.             for( var x = 0; x < RES_X; x++ ) {
  39.                 for( var y = 0; y < RES_Y; y++ ) {
  40.                     var el = document.createElement( 'input' );
  41.                     el.setAttribute( 'type', 'checkbox' );
  42.                     wrapper.appendChild( el );
  43.  
  44.                     var entity = {
  45.                         element: el,
  46.                         x: x * SIZE,
  47.                         y: y * SIZE
  48.                     }
  49.  
  50.                     el.style.left = entity.x + 'px';
  51.                     el.style.top = entity.y + 'px';
  52.                     el.addEventListener( 'change', this.toggle.bind( this, entity ) );
  53.  
  54.                     entities.push( entity );
  55.                 }
  56.             }
  57.  
  58.             function toggle( targetEntity ) {
  59.  
  60.                 var checked = targetEntity.element.checked;
  61.  
  62.                 entities.forEach( function( entity ) {
  63.  
  64.                     var dx = targetEntity.x - entity.x;
  65.                     var dy = targetEntity.y - entity.y;
  66.                     var distance = Math.sqrt( dx * dx + dy * dy );
  67.  
  68.                     setTimeout( function() {
  69.                         entity.element.checked = checked;
  70.  
  71.                         // re-run the animation, reading offsetWidth forces reflow
  72.                         entity.element.className = '';
  73.                         entity.element.offsetWidth;
  74.                         entity.element.className = 'grow';
  75.                     }, Math.round( distance * 1.8 ) );
  76.  
  77.                 } );
  78.  
  79.             }
  80.  
  81.             setTimeout( function() {
  82.                 entities[ 0 ].element.checked = true;
  83.                 toggle( entities[ 0 ] );
  84.             }, 500 );
  85.         </script>
  86.  
  87.         <div class="credits">
  88.             <a href="http://www.ck.ac.kr/" target="_blank"><img src="http://www.ck.ac.kr/wp-content/uploads/2012/04/05s_01.jpg" width="300"></a>
  89.         </div>
  90.  
  91.         <style type="text/css" media="screen">
  92.             .credits {
  93.                 position: absolute;
  94.                 font-size: 15px;
  95.                 color: #fff;
  96.             }
  97.  
  98.             .credits>* {
  99.                 vertical-align: middle;
  100.                 margin-left: 15px;
  101.             }
  102.  
  103.             .credits a {
  104.                 padding: 8px 10px;
  105.                 color: #333;
  106.                 border-radius: 2px;
  107.                 text-decoration: none;
  108.             }
  109.  
  110.             .credits a:hover {
  111.                 border-color: #666;
  112.                 color: #000;
  113.             }
  114.         </style>
  115.  
  116.         <script>
  117.             var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
  118.             (function(d, t) {
  119.             var g = d.createElement(t),
  120.                 s = d.getElementsByTagName(t)[0];
  121.             g.async = true;
  122.             g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  123.             s.parentNode.insertBefore(g, s);
  124.             })(document, 'script');
  125.         </script>
  126.  
  127.     </body>
  128.  
  129. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!