ScrollMovie is the library that enables you to animate background image as you scroll the window.
https://nagatapote.github.io/scroll-movie/
<script src="https://unpkg.com/scroll-movie@latest/dist/main.js"></script>ScrollMovie("#app", {
tracks: tracks,
getImage: getImage,
imageSize: number,
scrollsPerImage: number,
});At #app section, You can specify the element with the query string that can be found by document.querySelector.
Other props can be found as you scroll the window.
$ npm install scroll-movie --save
$ yarn add -D scroll-movie<ScrollMovie
tracks={tracks}
getImage={getImage}
imageSize={number}
scrollsPerImage={number}
/>[
{
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",
},
},
{
html: "<h1>Thank You.</h1>ScrollMovie.js is Great.",
timing: { start: 7000, end: 12000 },
buttonLabel: "end",
},
];You can specify the appearance timing of the each section with the timing property. eg.) End section will appear when scrolled 7000px (scrollPerImages * number of shown images) and disappear when scrolled 12000px (scrollPerImages * number of shown images).
getImage is the function to get the image path from the scroll amount.
getImage: (index) => {
const pad = `${index}`.padStart(3, "0");
return `images/image_${pad}.jpg`;
};imageSize: 524;The number of the images for the background-image you want to animate.
scrollsPerImage: 60;The scroll amount value for switching to the next image.
60 is recommended.
You can also put internal links so to jump to the specific sections you like.
<a href="#20000">Click Here. Go to the destination. (20000px)</a>;Animation can be customized freely in css.
With the following css, The section will fade out to the right.
.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) |
| 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) |
Don’t have the images for the background animation?
No worry!!
By following, You can convert the video to the images.
$ brew install ffmpeg
$ ffmpeg -i {filename}.mp4 -vcodec mjpeg image_%03d.jpgUse onTrackEnter props.
onTrackEnter: (targetElement) => {
targetElement.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
};