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

マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。

プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。

背景画像をアニメーション化できるバニラJavaScriptのライブラリ

ScrollMovie.js
ScrollMovie.js -GitHub

ScrollMovie.jsの特徴

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

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

ScrollMovie.jsのデモ

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

サイトのキャプチャ

ScrollMovie.js

ScrollMovie.jsの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

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

Step 3: JavaScript

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

アニメーション

アニメーションはCSSで自由にカスタマイズできます。

詳しくは、ScrollMovie.jsのドキュメントをご覧ください。
背景画像のアニメーション用に、動画から複数コマ分の画像を作成する方法なども解説されています。

サイトのキャプチャ

ScrollMovie.js

sponsors

top of page

©2022 coliss