使用javascript在mousemove上移动网格画廊

Question

我使用 html CSS 和 javascript 创建了这个项目。这个项目是关于移动与 mousemove 交互的网格画廊。我想做这个项目，但我不明白为什么它不能正常工作。我正在从这个网站制作这个项目，所以请像这样制作。 https://097-100dwfix.webflow.io

 document.addEventListener("DOMContentLoaded", function () {
            const gridInnerWrap = document.querySelector(".grid_inner-wrap");
    
            document.addEventListener("mousemove", function (e) {
              const mouseX = e.clientX / window.innerWidth - 0.1;
              const mouseY = e.clientY / window.innerHeight - 0.1;
    
              const translateX = -mouseX * 100;
              const translateY = -mouseY * 100;
    
              gridInnerWrap.style.transform = `translate(${translateX}%, ${translateY}%)`;
            });
          });

<style>
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
    
          body {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            background-color: #ebebeb;
            font-family: "IBM Plex Mono", sans-serif;
            color: #333;
          }
    
          .grid_outest-wrap {
            overflow: hidden;
          }
    
          .grid_outer-wrap {
            position: relative;
            width: 100vw;
            height: 100vh;
          }
    
          .grid_inner-wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
    
          .grid {
            display: grid;
            padding: 6vmin;
            grid-auto-columns: 30vmin;
            grid-auto-rows: 30vmin;
            grid-column-gap: 2vmin;
            grid-row-gap: 2vmin;
            grid-template-columns: repeat(7, 30vmin);
            grid-template-rows:
              30vmin 30vmin 30vmin 30vmin
              vmin
              30vmin;
          }
    
          .grid-item {
            position: relative;
            padding: 25%;
            background-color: #fff;
            cursor: pointer;
          }
    
          .grid-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: middle;
          }
    
          .span2 {
            grid-column: span 2;
            grid-row: span 2;
          }
    
          @media screen and (max-width: 767px) {
            .grid {
              grid-auto-columns: 46vw;
              grid-auto-rows: 46vw;
              grid-template-columns: 46vw 46vw;
              grid-template-rows: 46vw;
            }
          }
        </style>

<div class="grid_outest-wrap">
          <div class="grid_outer-wrap">
            <div class="grid_inner-wrap">
              <div class="grid">
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div class="span2">
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div class="span2">
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div class="span2">
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div class="span2">
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
                <div>
                  <div class="grid-item">
                    <img src="https://images.unsplash.com/photo-1597589827317-4c6d6e0a90bd?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="grid-img" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

Answer 1

如果你说的是平滑移动效果，因为你提到的网站有平滑移动效果，那么你可以尝试添加过渡：transform 1s ease-out； 在你的内包装中，我希望这能解决你遇到的问题。

.grid_inner-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transition: transform 1s ease-out;
  }