50 |
52 |
57 |
62 |
63 |
68 | ScrollMovie.js
51 |52 |
53 | ScrollMovie is the library that enables you to animate background
54 | image as you scroll the window.
55 |
56 | 57 |
58 | 
60 |
Scroll
59 |
60 |
69 |
71 |
100 |
101 |
102 | Installation
70 |71 |
VanillaJS
72 |
73 |
75 | <script src="https://unpkg.com/scroll-movie@latest/dist/main.js"></script>
76 |
78 | ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });
79 | At
80 | #app
88 | section, You can specify the element with the query string that can
89 | be found by
90 | document.querySelector.
Other props can be found as you scroll the window. 98 |
99 | Other props can be found as you scroll the window. 98 |
104 |
110 |
111 |
112 | React
105 |$ npm install scroll-movie --save$ yarn add -D scroll-movie<ScrollMovie tracks={tracks} getImage={getImage} imageSize={number} scrollsPerImage={number} />
113 |
125 |
126 |
127 |
128 | Tracks
114 |
115 |
124 | 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"
}
},
...
]
118 | You can specify the appearance timing of the each section with the
119 | timing property. eg.) End section will appear when scrolled 7000px
120 | (scrollPerImages * number of shown images) and disappear when
121 | scrolled 12000px (scrollPerImages * number of shown images).
122 |
123 |
129 |
131 |
144 |
147 |
148 |
149 | Images
130 |131 |
getImage
132 |
133 | getImage
141 | is the function to get the image path from the scroll amount.
142 |
143 | 144 |
ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });getImage: (index) => { const pad = `${index}`.padStart(3, "0"); return `images/image_${pad}.jpg`; }
151 |
160 |
161 |
162 | imageSize
152 |ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });imageSize: 524
155 | The number of the images for the background-image you want to
156 | animate.
157 |
158 |
163 |
171 |
172 |
173 |
178 | ScrollsPerImage
164 |ScrollMovie("#app", { tracks, getImage, imageSize, scrollsPerImage });scrollsPerImage: 60
167 | The scroll amount value for switching to the next image.
60 is 168 | recommended. 169 |
170 | 60 is 168 | recommended. 169 |
179 |
181 |
Click Here. Go to the destination. (20000px)
188 |
191 |
192 |
193 |
200 | Internal link
180 |181 |
182 | You can also put internal links so to jump to the specific sections
183 | you like.
184 |
185 | Click Here. Go to the destination. (20000px)
188 |
How
189 |<a href='#20000' >Click Here. Go to the destination. (20000px)</a>
201 |
207 |
212 |
213 |
214 |
215 | Animation
202 |
203 | Animation can be customized freely in css.
With the following 204 | css, The section will fade out to the right. 205 |
206 | With the following 204 | css, The section will fade out to the right. 205 |
207 |
Sample CSS
208 |
209 |
211 | .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;
}
216 |
257 |
258 |
259 |
260 | Props
217 |
218 |
219 |
255 |
256 | | Props name | 221 |Type | 222 |Explanation | 223 |
|---|---|---|
| tracks | 226 |Track[] | 227 |Display content. | 228 |
| getImage | 231 |(index: number) => string | 232 |Moving background. | 233 |
| imageSize | 236 |number | 237 |Number of images. | 238 |
| scrollsPerImage | 241 |number | 242 |Scroll value per image. | 243 |
| preload | 246 |boolean (default: false) | 247 |Preload images.(option) | 248 |
| preloadTimes | 251 |number (default: 0) | 252 |Time to wait for preload.Unit is ms.(option) | 253 |
261 |
307 |
308 |
309 |
310 |
262 |
263 |
305 |
306 | | Props name | 265 |Type | 266 |Explanation | 267 |
|---|---|---|
| navigationDisplayTiming | 270 |number (default: 0) | 271 |When to display the navigation bar and label.(option) | 272 |
| navigationDisabledBrowserSize | 275 |{ height: number; width: number } | 276 |
277 | If the browser size is less than or equal to the specified
278 | number, the navigation bar and label will not be 279 | displayed.(option) 280 | |
281 |
| nowLoadingMessage | 284 |string (default: '<div>NowLoading</div>') | 285 |Display until preload is completed.(option) | 286 |
| onTrackEnter | 289 |(target: HTMLElement) => void | 290 |Function to be executed at Start of trackView.(option) | 291 |
| onTrackLeave | 294 |(target: HTMLElement) => void | 295 |296 | Function to be executed at the end of trackView.(option) 297 | | 298 |
| classes | 301 |ClassNames | 302 |Change the default class name.(option) | 303 |
311 |
319 |
320 |
321 |
322 | Convert video to image（Bonus）
312 |
313 | Don’t have the images for the background animation?
No 314 | worry!!
By following, You can convert the video to the images. 315 |
316 | No 314 | worry!!
By following, You can convert the video to the images. 315 |
$ brew install ffmpeg$ ffmpeg -i {filename}.mp4 -vcodec mjpeg image_%03d.jpg
323 |
335 |
336 |
337 |
338 | Thank you
324 |That's it. Please try it.
325 |
326 | If you like it, Please give me a star on
327 | GitHub
332 | :)
333 |
334 |
339 |
346 |
347 |
340 | Developed by
341 | @pote
344 |
345 | 