鼠标视差对Vue.js的影响

Question

伙计们，日安！我想做鼠标的效果，就像在这个视频在我的vue项目。我尝试了一些代码，但是属性transform只改变了一次。如果有人知道，请帮帮我。这是codesandbox.io代码。我只复制了代码的一部分，而这部分代码不起作用。

​

var app = new Vue({
  el: '#app',
  data: {},
  methods: {
    parallax(e) {
      document.querySelectorAll(".layer").forEach((layer) => {
        const speed = layer.getAttribute("data-speed") || 2;
        const x = (window.innerWidth - e.pageX * speed) / 10;
        const y = (window.innerHeight - e.pageY * speed) / 10;

        layer.style.transform = `translateX(${x}px) translateY(${y}px)`;
      });
    },
  },
})

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.log {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
h2 {
  font-size: 3em;
}
.layer {
  position: absolute;
}
.layer-1 {
  top: 0;
  left: 2%;
}
.layer-2 {
  top: 20%;
  left: 10%;
}
.layer-3 {
  top: 40%;
  right: 2%;
}
.layer-4 {
  top: 5%;
  right: 2%;
}
.layer-5 {
  top: 60%;
  right: 25%;
}
.layer-6 {
  top: 5%;
  right: 40%;
}
.layer-7 {
  top: 70%;
  left: 2%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div class="log" @mousemove="parallax">
      <img
        class="layer layer-1"
        src="./assets/bg-1.png"
        alt="bg-1"
        width="5%"
        data-speed="2"
      />
      <img
        class="layer layer-2"
        src="./assets/bg-2.png"
        alt="bg-2"
        width="10%"
        data-speed="2"
      />
      <img
        class="layer layer-3"
        src="./assets/bg-1.png"
        alt="bg-1"
        width="15%"
        data-speed="2"
      />
      <img
        class="layer layer-4"
        src="./assets/bg-2.png"
        alt="bg-2"
        width="10%"
        data-speed="2"
      />
      <img
        class="layer layer-5"
        src="./assets/bg-1.png"
        alt="bg-1"
        width="25%"
        data-speed="2"
      />
      <img
        class="layer layer-6"
        src="./assets/bg-2.png"
        alt="bg-2"
        width="17%"
        data-speed="2"
      />
      <img
        class="layer layer-7"
        src="./assets/bg-1.png"
        alt="bg-1"
        width="17%"
        data-speed="2"
      />
      <h2>Parallax</h2>
    </div>
  </div>

​

//codesandbox.io/s/flamboyant-rosalind-u0nwx?file=/src/App.vue

Answer 1

我认为最好使用npm库的名称为vue-kinesis。

但是，如果要使用变体，则需要更改第57行：

const speed = layer.getAttribute('data-speed') || 2;

因为在每个层上都没有属性data-speed和const speed是相等的null。

因此，更改我为回退编写的行，并(如果您想配置速度)使用速度data-speed="2"在每个元素属性上添加。