import {
ParallaxTiming,
ParallaxSpeed,
ParallaxFit
} from 'scroll-parallax-effect'
直接 HTML に読みたい場合は dist フォルダのファイルを使い下記の通り読み込んでください。
https://kamem.github.io/scroll-parallax-effect/dist/scroll-parallax-effect/scroll-parallax-effect.min.js
<script
type="text/javascript"
src="../js/scroll-parallax-effect.min.js"
></script>
横方向にしたい場合は下記
import {
updateStatus,
} from 'scroll-parallax-effect'
updateStatus({ direction: 'x' })
Parallax.updateStatus({ direction: 'x' })
他のScrollStatus のオプションもここで指定できます。
import {
ParallaxTiming,
} from 'scroll-parallax-effect'
new ParallaxTiming('#timing')
new Parallax.ParallaxTiming('#timing')
import {
ParallaxSpeed,
} from 'scroll-parallax-effect'
new ParallaxSpeed('.speed', {
style: 'top',
speed: 3,
contentScrollPosition: '#speed'
})
new Parallax.ParallaxSpeed('.speed', {
style: 'top',
speed: 3,
contentScrollPosition: '#speed'
})
import {
ParallaxFit,
} from 'scroll-parallax-effect'
new ParallaxFit('.fit', {
start: 1000,
end: 2000,
fromStyle: {
opacity: 0
},
toStyle: {
opacity: 1,
},
easing: 'easeOutBack'
})
new Parallax.ParallaxTiming('.fit', {
start: 1000,
end: 2000,
fromStyle: {
opacity: 0
},
toStyle: {
opacity: 1,
},
easing: 'easeOutBack'
})
import { ParallaxFit } from "scroll-parallax-effect";
new ParallaxFit(".fit", [
{
start: 0,
end: 1000,
fromStyle: {
opacity: 0,
},
toStyle: {
opacity: 1,
},
easing: "easeOutBack",
},
{
start: 1000,
end: 2000,
fromStyle: {
opacity: 1,
},
toStyle: {
opacity: 0,
},
easing: "easeOutBack",
},
]);
new Parallax.ParallaxTiming('.fit', [
{
start: 0,
end: 1000,
fromStyle: {
opacity: 0
},
toStyle: {
opacity: 1,
},
easing: 'easeOutBack'
},
{
start: 1000,
end: 2000,
fromStyle: {
opacity: 1
},
toStyle: {
opacity: 0,
},
easing: 'easeOutBack'
}
])