Create parallax effect easily

useParallax

effect inspired byblackmagic.so

tilt: NaN
roll: NaN
source: mouse

view

 <div ref="container">
    <div :style="cardStyle"></div>
 </div>

logic

<script setup lang='ts'>
import { useParallax } from '@vueuse/core'

const container = ref<HTMLDivElement | null>(null)
const { tilt, roll, source } = useParallax(container)
const cardStyle = computed(() => ({
  border: '1px solid #cdcdcd',
  boxShadow: '0 0 20px 0 rgba(255, 255, 255, 0.25)',
  transform: `rotateX(${roll.value * 40}deg) 
              rotateY(${tilt.value * 40}deg)`,
}))
</script>
✨

Made with❤by leovoon