鸟瞰视差

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

class App extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "handleMouseMove",
    e => {
      const el = document.getElementById("wrapper");
      const d = el.getBoundingClientRect();
      let x = e.clientX - (d.left + Math.floor(d.width / 2));
      let y = e.clientY - (d.top + Math.floor(d.height / 2));
      // Invert values
      x = x - x * 2;
      y = y - y * 2;
      document.documentElement.style.setProperty("--scale", 1.6);
      document.documentElement.style.setProperty("--x", x / 2 + "px");

document.documentElement.style.setProperty("--y", y / 2 + "px");
    });_defineProperty(this, "handleMouseLeave",

() => {
      document.documentElement.style.setProperty("--scale", 1);
      document.documentElement.style.setProperty("--x", 0);
      document.documentElement.style.setProperty("--y", 0);
    });}
  render() {
    return /*#__PURE__*/(
      React.createElement("div", {
        id: "wrapper",
        onMouseMove: this.handleMouseMove,
        onClick: this.handleMouseLeave }, /*#__PURE__*/

React.createElement("img", { id: "image" })));

}}

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));

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