Example
Option
Option Name |
Description |
Type |
default |
el |
タグ・タグ名 |
string Element HTMLElement |
指定したタグここで指定したタグの中身の path を取得 |
paths |
パスの配列 |
NodeListOf<SVGGeometryElement> |
path の配列、上よりここで指定した path が優先 |
Timing Option
Speed Option
Fit Option
Option Name |
Description |
Type |
default |
motion |
motion の値 |
SvgFitMotion SvgFitMotion[] |
[] |
triggerPosition |
指定した位置にきたときにtoggle を実行します |
スクロール位置の指定 |
undefinedの場合targetの位置を取得 |
Motion
Usage
ES6 Typescript
import {
SvgParallaxTiming,
SvgParallaxSpeed,
SvgParallaxFit,
} from 'scroll-parallax-effect/svg'
直接 HTML に読みたい場合は dist フォルダのファイルを使い下記の通り読み込んでください。
https://kamem.github.io/scroll-parallax-effect/dist/scroll-parallax-effect/scroll-parallax-effect-svg.min.js
Vanilla
<script
type="text/javascript"
src="../js/scroll-parallax-effect-svg.min.js"
></script>
横方向にしたい場合は下記
ES6 Typescript
import { updateStatus } from "scroll-parallax-effect";
updateStatus({ direction: "x" });
Vanilla
Parallax.updateStatus({ direction: 'x' })
他のScrollStatus のオプションもここで指定できます。
Timing Usage
ES6 Typescript
import { SvgParallaxTiming } from "scroll-parallax-effect/svg";
new SvgParallaxTiming("#timing");
Vanilla
new Parallax.SvgTiming('#timing')
Speed Usage
ES6 Typescript
import {
SvgParallaxSpeed,
} from 'scroll-parallax-effect/svg'
new SvgParallaxSpeed('.speed', {
triggerPosition: ['.speed', -300],
speed: 0.2,
threshold: 0.5
})
Vanilla
new Parallax.SvgSpeed('.speed', {
triggerPosition: ['#music', -300],
speed: 0.2,
threshold: 0.5
})
Fit Usage
ES6 Typescript
import {
ParallaxFit,
} from 'scroll-parallax-effect/svg'
new SvgParallaxFit('#fit', { motion: [
{
start: ['#fit', -380],
end: ['#fit', -200],
from: 0,
to: 0.5,
easing: 'easeOutCubic'
},
{
end: ['#fit', -100],
to: 0.3,
},
{
end: ['#fit', -10],
to: 1,
easing: 'easeInOutQuart'
},
]})
Vanilla
new Parallax.SvgFit('#fit', { motion: [
{
start: ['#fit', -380],
end: ['#fit', -200],
from: 0,
to: 0.5,
easing: 'easeOutCubic'
},
{
end: ['#fit', -100],
to: 0.3,
},
{
end: ['#fit', -10],
to: 1,
easing: 'easeInOutQuart'
},
]})