ScrollMovie

ScrollMovie is the library that enables you to animate background image as you scroll the window.

Installation

vanillaJS

<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.

React

$ npm install scroll-movie --save

$ yarn add -D scroll-movie

<ScrollMovie
  tracks={tracks}
  getImage={getImage}
  imageSize={number}
  scrollsPerImage={number}
/>

Tracks

[
  {
    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).

Images

getImage

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`;
};

Number of images (Example)

imageSize: 524;

The number of the images for the background-image you want to animate.

Scroll per image

scrollsPerImage: 60;

The scroll amount value for switching to the next image.

60 is recommended.

Internal link

You can also put internal links so to jump to the specific sections you like.

How

<a href="#20000">Click Here. Go to the destination. (20000px)</a>;

Animation

Animation can be customized freely in css.

With the following css, The section will fade out to the right.

Sample CSS

.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

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)

Bonus

Convert video to image

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.jpg

How to highlight source code

Use onTrackEnter props.

onTrackEnter: (targetElement) => {
  targetElement.querySelectorAll("pre code").forEach((block) => {
    hljs.highlightBlock(block);
  });
};

Thank you

That's it. Please try it.