スクロール

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

ScrollyVideo.js は、ブラウザの画面効果のためのライブラリで、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。 と、言葉で書いても伝わってる気がしません。ScrollyVideo.js のサイトで見るのが一番わかりやすいと思います。 このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールし …

Printing Money - 紙幣の量で様々な時給を比較

ニール・アガヴァルさん(Neal Agarwal)の、米1ドル札を使ったビジュアライズ。様々な時給を、スクロールするお金の量で表しています。 先頭は連邦最低賃金の$7.25 。一時間に$7.25稼げるということで、一時間で7.25枚分のドル札がスクロールするんでしょう。 # ほとんど止まっていますが ソフトウェア技術者、医師、フォーチュン500企業のCEO、らの時給が並べられています。「あなたの時 …

The Deep Sea - 深海の深さをブラウザの縦スクロールで表現

The Deep Seaは、深海の生物を紹介するウェブサイトです。 面白いのは、深さを縦長のウェブページで表現しているところ。 スクロールダウンすると、海の深さが少しずつ深くなっていき、その深さで観察される生物が表示されます。 生物の名前やその特徴の紹介文などはすべてテキストなので、Chrome ブラウザの翻訳機能を使えば自動翻訳の日本語でも読むことができます。 それにしても、このページ、長い長い …

疲れ知らずのネットサーフィンロボット

ネットの巡回に飽きたら、こんなロボットにまかせてみるのもいいかもしれません。 スペインのデザイン開発集団MONOBOによる作品の一つ目は、勝手にマウスを動かし勝手にクリックしてくれる指の形のロボットです。 自走するマウスに乗った人差し指が、移動しながらひたすらクリックすると、マウスにつながったパソコンのブラウザが次々と切り替わっていきます。 勝手にクリックすると、いつのまにかとんでもないページを閲 …