タグ: スクロール

ScrollyVideo.js – ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ

ScrollyVideo.js は、ブラウザの画面効果のためのライブラリで、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。

と、言葉で書いても伝わってる気がしません。ScrollyVideo.js のサイトで見るのが一番わかりやすいと思います。

このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールしていくと、動画が先に進むため、スクロールに合わせてみている自分が前に飛んでいるような感覚が得られます。

デモでは単純なスクロールとの同期だけでなく、スクロールの途中でテキストボックスが流れたりもしていますが、vanilla JavaScript のデモ(ダウンロードしてブラウザで開くだけで動きます)では、非常に短いHTMLのコードで基本的な部分が動くのがわかります。

自分で撮影した mp4 ファイルでももちろん動きましたが、あまりこのライブラリで見栄えのするような動画がなく。

デモのように前後に進む動画がおそらくよく合うんでしょう。部屋を360度ぐるっと回ってみる動画とかを表示してみましたがあまりいいものになりませんでした。

ライブラリはプレーンなJavaScript の他、React, Svelte, Vue からも呼び出せるようになっていて、それぞれのデモファイルがあります。

ニール・アガヴァルさん(Neal Agarwal)の、米1ドル(110円)札を使ったビジュアライズ。様々な時給を、スクロールするお金の量で表しています。

先頭は連邦最低賃金の$7.25(770円) 。一時間に$7.25(770円)稼げるということで、一時間で7.25枚分のドル札がスクロールするんでしょう。

# ほとんど止まっていますが

ソフトウェア技術者、医師、フォーチュン500企業のCEO、らの時給が並べられています。「あなたの時給」を入れて比較することも可能。

その下は、$1000(11万円) の束を使って表した有名企業の収入、NASAや米軍の出費、アメリカの赤字拡大額、などですね。まあこちらは「なんかすごい」という感じにしかなりませんけど。

The Deep Seaは、深海の生物を紹介するウェブサイトです。

面白いのは、深さを縦長のウェブページで表現しているところ。

スクロールダウンすると、海の深さが少しずつ深くなっていき、その深さで観察される生物が表示されます。

生物の名前やその特徴の紹介文などはすべてテキストなので、Chrome ブラウザの翻訳機能を使えば自動翻訳の日本語でも読むことができます。

それにしても、このページ、長い長い。ページの最後は、1960年にマリアナ海溝の最深部に到達したトリエステ号のチャレンジを紹介しています。