snake gallery

by Kim Ara

HTML

<div class="container">
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
  <div class="block">
    <div class="bg"></div>
  </div>
</div>

CSS

.container {
  margin: 100px;
  overflow: hidden;
}

.block {
  float: left;
  width: 100px;
  height: 200px;
  margin: 30px;
  background: #eee;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-100%, -100%, 0);
  transition: all 0.3s;
}

JavaScript

$.fn.hitTest = function(x, y) {
  var bounds = this.offset();
  bounds.right = bounds.left + this.outerWidth();
  bounds.bottom = bounds.top + this.outerHeight();
  if (x >= bounds.left) {
    if (x <= bounds.right) {
      if (y >= bounds.top) {
        if (y <= bounds.bottom) {
          return true;
        }
      }
    }
  }
  return false;
}

$(document).ready(function() {
  var mouse = {},
    $block = $('.container .block'),
    startFlag = false;

  $(document).on('mousemove', function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;

    $block.each(function(index, el) {
      var $this = $(this),
        hover = $this.hitTest(mouse.x, mouse.y),
        $bg = $this.find('.bg'),
        $offset = $this.offset(),
        width = $this.width(),
        height = $this.height(),
        center = {
          x: $offset.left + (width / 2),
          y: $offset.top + (height / 2)
        }
      range = {
          x1: center.x + width / 6,
          x2: center.x - width / 6,
          y1: center.y + height / 6,
          y2: center.y - height / 6
        },
        toStyle = {
          transition: (startFlag) ? 'all 0.3s' : 'none'
        };

      if (!hover) {
        if (mouse.x > range.x1) {
          // right
          toStyle.left = '200%';
        } else if (mouse.x < range.x2) {
          // left
          toStyle.left = '0';
        } else {
          // center
          toStyle.left = '100%';
        }

        if (mouse.y > range.y1) {
          // bottom
          toStyle.top = '200%';
        } else if (mouse.y < range.y2) {
          // top
          toStyle.top = '0';
        } else {
          // center
          toStyle.top = '100%';
        }

        $bg.css(toStyle);
      }
    });

    startFlag = true;
  });

  $block.on('mouseenter', function(e) {
    var $this = $(this),
      $bg = $this.find('.bg'),
      $offset = $this.offset(),
      width = $this.width(),
      height = $this.height(),
      center = {
        x: $offset.left...