import Vue from 'vue'
import Parallax from 'scroll-parallax-effect/vue'
import App from './App'
Vue.use(Parallax)
const app = new Vue({
el: '#app',
render: (h) => h(App)
})
import { createApp } from 'vue'
import App from './App.vue'
import Parallax from 'scroll-parallax-effect/vue'
createApp(App).use(Parallax).mount('#app')
横方向にしたい場合は下記
Vue.use(Parallax, { direction: 'x' })
createApp(App).use(Parallax, { direction: 'x' }).mount('#app')
他のオプションもここで指定できます。
<template>
<div v-parallax-timing />
</template>
<template>
<div
v-parallax-speed
styles="top"
:speed="3"
contentScrollPosition="#speed"
/>
</template>
<template>
<div
v-parallax-speed="parallaxSpeed"
/>
</template>
<script>
export default {
data() {
return {
parallaxSpeed: {
styles: "top"
speed: 3
contentScrollPosition: '#speed'
}
}
},
}
</script>
<template>
<div
v-parallax-fit
:start="1000"
:end="2000"
:fromStyle="{
opacity: 0,
}"
:toStyle="{
opacity: 1,
}"
easing="easeOutBack"
/>
</template>
<template>
<div
v-parallax-fit="parallaxFit"
/>
</template>
<script>
export default {
data() {
return {
parallaxFit: {
start: 1000,
end: 2000,
fromStyle: {
opacity: 0
},
toStyle: {
opacity: 1,
},
easing: 'easeOutBack'
}
}
},
}
</script>
<template>
<div
v-parallax-fit="parallaxFit"
/>
</template>
<script>
export default {
data() {
return {
parallaxFit: [
{
start: 0,
end: 1000,
fromStyle: {
opacity: 0
},
toStyle: {
opacity: 1,
},
easing: 'easeOutBack'
},
{
start: 1000,
end: 2000,
fromStyle: {
opacity: 1
},
toStyle: {
opacity: 0,
},
easing: 'easeOutBack'
}
]
}
},
}
</script>