LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#base {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  background-color: white;
}

.b {
  display: inline-block;
  width: 10px;
  height: 10px;
  outline: 1px solid #e1e1e1;
  background-color: white;
}

.r {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  height: 11px;
  line-height: 10px;
}
.r:nth-child(odd) {
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
}
JS
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var $base = $("#base");

var brickHeight = 10;
var brickWidth = 10;

var numberOfBricksAcross = Math.ceil(
  ($base.width() + 2 * brickWidth) / brickWidth
);
var numberOfBricksDown = Math.ceil($base.height() / brickHeight);

console.log(numberOfBricksAcross);

for (var i = 0; i < numberOfBricksDown; i++) {
  var r = '';
  for (var j = 0; j < numberOfBricksAcross; j++) {
    r += '';
  }
  r += "";
  $base.append(r);
}

var doHoverColor = debounce(function() {}, 250);

var hoverInterval = null;

$(".b")
  .on("mouseover", function() {
    var $this = $(this);
    hoverInterval = setInterval(function() {
      var color = $this.css("background-color");

      var rgb = color
        .replace(/^(rgb|rgba)\(/, "")
        .replace(/\)$/, "")
        .replace(/\s/g, "")
        .split(",");
      
      var newR = rgb[0] * 1;
      if (newR > 0) {
        newR -= 5;
      } 
      
      var newG = newR;
      var newB = newR;

//       var newR = rgb[0] * 1;
//       var newG = rgb[1] * 1;
//       var newB = rgb[2] * 1;

//       if (newR === 0 && newG === 0 && newB === 0) {
//         newR = 255;
//         newG = 255;
//         newB = 255;
//       } else {
//         if (newB > 0) {
//           newB -= 1;
//         } else {
//           if (newG > 0) {
//             newG -= 1;
//           } else {
//             if (newR > 0) {
//               newR -= 1;
//             }
//           }
//         }        
//       }

      console.log(rgb);
      console.log(newR.toString(), newG.toString(), newB.toString());
      
      $this.css('background-color', 'rgb(' + newR.toString() + ', ' + newG.toString() + ', ' + newB.toString() + ')');
      
      // console.log(color);
      // console.log($this.attr('id'));
    }, 10);
  })
  .on("mouseout", function() {
    clearInterval(hoverInterval);
  })
.on("click", function() {
  var $this = $(this);
  $this.css('background-color', 'rgb(255, 255, 255)');
});

// console.log(numberOfBricksAcross);
// console.log(numberOfBricksDown);
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv