最近のランディングページで見かける！スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js

サイト構築 -JavaScript

Post on:2022年4月6日

ScrollMovie.jsの特徴

ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリです。
動画みたいにするには、複数コマ分の画像が必要です。

ScrollMovie.js
※GIFアニメにしているのでカクカクしていますが、元ページは滑らかです。

ScrollMovie.jsのデモ

ScrollMovie.jsのデモは、下記で楽しめます。
スクロールまたは下部のバーで操作でき、キーボード操作にもスマホのスワイプ操作にも対応しています。

ScrollMovie.js

ScrollMovie.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="https://unpkg.com/scroll-movie@latest/dist/main.js"></script>

1	<script src="https://unpkg.com/scroll-movie@latest/dist/main.js"></script>

Step 2: HTML

アニメーション化する背景画像を配置するHTMLを用意します。

<body>
    <div id="app"></div>
</body>

<body>

</body>

スライドは必要な枚数を<template>で用意します。div要素内は自由にレイアウトできます。

<body>
    <div id="app"></div>
    <!-- slide-1 -->
    <template id="slide-1">
      <div class="slider-1-section">コンテンツ</div>
    </template>
    <!-- slide-2 -->
    <template id="slide-2">
      <div class="slider-2-section">コンテンツ</div>
    </template>
</body>

<body>

<div class="slider-1-section">コンテンツ</div>

</template>

<div class="slider-2-section">コンテンツ</div>

</template>

</body>

Step 3: JavaScript

スクリプトを初期化し、実行します。

ScrollMovie("#app", {
  tracks: tracks,
  getImage: getImage,
  imageSize: number,
  scrollsPerImage: number,
});

ScrollMovie("#app", {

tracks: tracks,

getImage: getImage,

imageSize: number,

scrollsPerImage: number,

});

アニメーション

アニメーションは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;
}