mirror of https://github.com/nuxt/nuxt.git
59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
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>
|