Nuxt/docs/components/molecules/HeroParallax.vue

<template>
  <div ref="containerImg" class="absolute top-0 left-0 z-10 w-full h-full select-none pointer-events-none transition-opacity ease-out duration-800" :class="[hidden ? 'opacity-0' : 'opacity-100']">
    <img
      ref="gem3"
      data-speed="1"
      loading="lazy"
      :src="`/img/home/hero/gem-3.svg`"
      class="hidden lg:block absolute left-1/2 -ml-16 top-20"
      alt="An image of a green gem from nuxt galaxy"
    >
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const containerImg = ref(null)
    const hidden = ref(true)

    function parallax (e) {
      const images = Array.from(containerImg.value.children)
      if (hidden.value) {
        hidden.value = false
      }

      for (const el of images) {
        const image = el
        const speed = parseInt(image.getAttribute('data-speed'))
        const x = (window.innerWidth - e.pageX * speed) / 100
        const y = (window.innerHeight - e.pageY * speed) / 100
        image.style.transform = `translateX(${x}px) translateY(${y}px)`
      }
    }

    if (process.client) {
      const isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
      if (isTouchDevice) {
        onMounted(() => {
          setTimeout(() => {
            hidden.value = false
          }, 200)
        })
      } else {
        onMounted(() => window.addEventListener('mousemove', parallax))
        onBeforeUnmount(() => window.removeEventListener('mousemove', parallax))
      }
    }

    return {
      hidden,
      containerImg,
      parallax
    }
  }
})
</script>