<script src="https://unpkg.com/scroll-movie@latest/dist/main.js"></script>ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });$ npm install scroll-movie --save$ yarn add -D scroll-movie<ScrollMovie tracks={tracks} getImage={getImage} imageSize={number} scrollsPerImage={number} />ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });[
{
html: "<h1>ScrollMovie.js</h1>Hello ScrollMovie.js",
timing: {
start: 0,
end: 5000
},
buttonLabel: "start",
animation: {
start: "scroll-movie__track-view_start",
end: "scroll-movie__track-view_end"
}
},
...
]ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });getImage: (index) => { const pad = `${index}`.padStart(3, "0"); return `images/image_${pad}.jpg`; }ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });imageSize: 524ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });scrollsPerImage: 60<a href='#20000' >Click Here. Go to the destination. (20000px)</a>.original-css-start {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.original-css-end {
position: absolute;
top: 50%;
left: 50%;
transform: translate(100%, -50%);
opacity: 0;
}| Props name | Type | Explanation |
|---|---|---|
| tracks | Track[] | Display content. |
| getImage | (index: number) => string | Moving background. |
| imageSize | number | Number of images. |
| scrollsPerImage | number | Scroll value per image. |
| preload | boolean (default: false) | Preload images.(option) |
| preloadTimes | number (default: 0) | Time to wait for preload.Unit is ms.(option) |
| Props name | Type | Explanation |
|---|---|---|
| navigationDisplayTiming | number (default: 0) | When to display the navigation bar and label.(option) |
| navigationDisabledBrowserSize | { height: number; width: number } |
If the browser size is less than or equal to the specified
number, the navigation bar and label will not be displayed.(option) |
| nowLoadingMessage | string (default: '<div>NowLoading</div>') | Display until preload is completed.(option) |
| onTrackEnter | (target: HTMLElement) => void | Function to be executed at Start of trackView.(option) |
| onTrackLeave | (target: HTMLElement) => void | Function to be executed at the end of trackView.(option) |
| classes | ClassNames | Change the default class name.(option) |
$ brew install ffmpeg$ ffmpeg -i {filename}.mp4 -vcodec mjpeg image_%03d.jpg