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

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.