Home » vue » Mouseover parallax effect on Vue.js [closed]

Mouseover parallax effect on Vue.js [closed]

Posted by: admin November 26, 2021 Leave a comment

Questions:

Good day guys! I want to do mouseover effect like in this video in my vue project. I tried some code but property transform changed just once. If someone knows, please help me. thats codesandbox.io code. I copied just a part of my code which doesn’t work.

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

Answers:

I think better to use the npm library for it with the name vue-kinesis.

But if you want to use your variant, you need to change line 57:

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

Because on each layer you don’t have an attribute data-speed and const speed will be equal null.

So, change the line that I wrote for fallback and (if you want to configure speed) add on each element attribute with speed data-speed="2".