スクロール on akky@サイボウズラボ・ブログ

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

Wed, 18 Jan 2023 00:00:00 +0000

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

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

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

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

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

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

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

Fri, 14 Feb 2020 00:00:00 +0000

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

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

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

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

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

Sun, 08 Dec 2019 00:00:00 +0000

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

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

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

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

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

Fri, 31 Jul 2015 00:00:00 +0000

ネットの巡回に飽きたら、こんなロボットにまかせてみるのもいいかもしれません。

スペインのデザイン開発集団MONOBOによる作品の一つ目は、勝手にマウスを動かし勝手にクリックしてくれる指の形のロボットです。

自走するマウスに乗った人差し指が、移動しながらひたすらクリックすると、マウスにつながったパソコンのブラウザが次々と切り替わっていきます。

勝手にクリックすると、いつのまにかとんでもないページを閲覧してるかもしれないですけど。いちばんクリックしそうなのは広告なので企業のウェブサイトに行って出れなくなったりもしそうです。

こちらは永遠にスクロールし続けてくれる指ロボット。

Tumblr や Twitter をダラダラと見させるのにいいんじゃないでしょうか。