LOOK-AT

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900");
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #F7F7F7;
  font-family: "Montserrat", sans-serif;
}

a.dark-mode, a.dark-mode:link, a.dark-mode:visited, a.dark-mode:active {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 12px;
  text-decoration: none;
  background: #3B425A;
  padding: 4px 8px;
  z-index: 10;
  color: #f7f7f7;
}
a.dark-mode:hover, a.dark-mode:link:hover, a.dark-mode:visited:hover, a.dark-mode:active:hover {
  background: #7B46FE;
  color: #FDFA75;
}

.lookat-target {
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 2;
}
.lookat-target:before {
  background: rgba(255, 255, 255, 0.6);
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  top: -40px;
  left: -40px;
}
.lookat-target:after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 86px;
  top: -45px;
  left: -45px;
  border: 2px solid #3B425A;
}

.head {
  z-index: 100;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 600px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
}
.head h1 {
  font-size: 70px;
  font-weight: 700;
  margin: 0;
  color: #3B425A;
}
.head h3 {
  font-size: 30px;
  font-weight: 100;
  margin: 0;
  color: #3B425A;
}
.head a, .head a:link, .head a:visited, .head a:active {
  color: #3B425A;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px solid #7B46FE;
  position: relative;
}
.head a:hover, .head a:link:hover, .head a:visited:hover, .head a:active:hover {
  color: #7B46FE;
}

.item_container {
  position: absolute;
}

.donut {
  position: absolute;
  display: block;
  width: 60px;
  height: 60px;
  border: 16px solid #81FFE4;
  border-radius: 100%;
  border-right-color: transparent;
  transform-origin: 50% 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
}
.donut:after {
  animation: oscillation 20s infinite ease-in-out;
  content: "";
  display: block;
  position: relative;
  left: -13px;
  top: -12px;
  width: 60px;
  height: 60px;
  border: 2px solid #71dFd4;
  border-radius: 100%;
  border-right-color: transparent;
}

.sausage {
  position: absolute;
  box-sizing: border-box;
  display: block;
  width: 100px;
  height: 5px;
  background: #7B46FE;
  border-radius: 5px;
  transform-origin: 100% 50%;
  transform: translateX(-100%) translateY(-50%);
  top: 50%;
}
.sausage:after {
  position: relative;
  content: "";
  width: 102px;
  height: 7px;
  display: block;
  border: 2px solid #7B46FE;
  left: -3px;
  top: -3px;
  border-radius: 5px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.square {
  position: absolute;
  box-sizing: border-box;
  display: block;
  width: 40px;
  height: 40px;
  border: 10px solid #FDFA75;
  transform-origin: 50% 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
}
.square:after {
  animation: oscillation 20s infinite ease-in-out;
  position: relative;
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  border: 2px solid #EDEA45;
  left: -8px;
  top: -15px;
}

.diamond {
  position: absolute;
  box-sizing: border-box;
  display: block;
  width: 10px;
  height: 10px;
  background: #3B425A;
  transform-origin: 50% 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
}

.plus {
  position: absolute;
  background: #D4D6DA;
  height: 32px;
  width: 4px;
  transform-origin: 50% 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
}
.plus:after {
  background: #D4D6DA;
  content: "";
  height: 4px;
  left: -14px;
  position: absolute;
  top: 14px;
  width: 32px;
}

@keyframes oscillation {
  0% {
    transform: rotate(-20deg) translate(0px, 0px);
  }
  25% {
    transform: rotate(0deg) translate(10px, 20px);
  }
  50% {
    transform: rotate(20deg) translate(0px, 40px);
  }
  75% {
    transform: rotate(0deg) translate(-10px, 20px);
  }
  100% {
    transform: rotate(-20deg) translate(0px, 0px);
  }
}

JavaScript

(function() {
  var Followme, LA, elements, items;

$.fn.lookAt = function(target_coordinates, reinit) {
    var position;
    var angle, position, x, y;
    if (reinit === null) {
      reinit = false;
    }
    x = target_coordinates.x;
    y = target_coordinates.y;
    if (!this.data('position') || reinit === true) {
      position = {
        x: this.offset().left,
        y: this.offset().top
      };
      this.data('position', position);
    } else {
      position = this.data('position');
    }
    angle = Math.atan2(y - position.y, x - position.x);
    this.css('transform', 'rotate(' + angle + 'rad)');
  };

Followme = (function() {
    Followme.prototype.defaults = {
      dumping: 1,
      disable: false,
      coordiantes_to_follow: {
        x: 0,
        y: 0
      },
      offset: {
        x: 0,
        y: 0
      },
      onChange: function(coordinates) {}
    };

Followme.prototype.setCoordinates = function(data) {
      return this.options.coordiantes_to_follow = data;
    };

Followme.prototype.follow = function() {
      var coordinates, dumping, offset, xd, yd;
      if (!this.element.data("dumping")) {
        dumping = this.element.data("dumping") || this.options.dumping;
        this.element.data("dumping", dumping);
      } else {
        dumping = this.element.data("dumping");
      }
      offset = this.element.offset();
      xd = this.options.offset.x + this.options.coordiantes_to_follow.x - offset.left;
      yd = this.options.offset.y + this.options.coordiantes_to_follow.y - offset.top;
      coordinates = {
        x: offset.left + xd / dumping,
        y: offset.top + yd / dumping
      };
      this.element.css({
        "left": coordinates.x,
        "top": coordinates.y
      });
      this.options.onChange(coordinates);
      if (!this.disable) {
        return requestAnimationFrame((function(_this) {
          return function() {
            return _this.follow();
          };
        })(this));
      }
    };

return Followme;

})();

elements = [
    {
      'type': 'donut',
      'number': 10
    }, {
      'type': 'square',
      'number': 10
    }, {
      'type': 'diamond',
      'number': 20
    }, {
      'type': 'sausage',
      'number': 16
    }, {
      'type': 'plus',
      'number': 10
    }
  ];

items = [];

$.each(elements, function(i, element) {
    var i;
    var item;
    i = 0;
    while (i < element.number) {
      item = $('<div class="item_container"><div class="' + element.type + '"></div></div>');
      item.css({
        'left': Math.random() * $(window).width(),
        'top': Math.random() * $(window).height()
      });
      items.push(item);
      $('body').append(item);
      i++;
    }
  });

LA = new Followme("#lookat-target", {
    onChange: (function(_this) {
      return function(coordinates) {
        return $.each(items, function(i, e) {
          return requestAnimationFrame((function(_this) {
            return function() {
              return $(e).lookAt({
                x: coordinates.x,
                y: coordinates.y
              });
            };
          })(this));
        });
      };
    })(this)
  });

$(window).on("mousemove.followme", (function(_this) {
    return function(e) {
      return LA.setCoordinates({
        x: e.pageX,
        y: e.pageY
      });
    };
  })(this));

}).call(this);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg