カテゴリー
UIデザイン

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

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

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

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

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

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

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

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

via FlowingData

カテゴリー
ジェネレーター ツール

Facitars! – アバターアイコン生成ライブラリ

Facitars! は、一定のトーンに沿った形で与えたシードからランダムなアバターアイコンを生成してくれるライブラリです。

Facitars! のサンプルコードで生成したランダムなアバター群

アカウント名やメールアドレスをシードにすることで、他のユーザーと形や色が同じにならないユニークなアイコンをユーザーごとに自動で作れるため、会員登録制のwebサービスのデフォルトアイコンなどに使えそうです。

HTMLページに埋め込んだJavaScript から呼び出すことも、サーバーサイドから呼んで画像を作ることもできるオープンソースのライブラリの形式で提供されています。実際に作ってみました。

Facitars! で自分のアカウント名などをシードに作成したアバターアイコン

ユーザー登録サービスでも自分のアイコンを登録する手間は面倒と感じる人が多いようで、ユーザーが並んでいるコメント欄などでもデフォルトのアイコンが並ぶばかり、というサービスもありますね。こういったライブラリを使ってデフォルトアイコンでも個人別に違ったものにすることはいい対策かなと思います。

同様のアバタージェネレーターとしてはたとえばBoring Avatarsなどもあります。こちらはカワイイ系のアイコンを生成できますが、色のバリエーションは手動で与えるタイプのようです。

via reddit

カテゴリー
ゲーム

Google表計算でWordle

本日のWordleクローンは、Google Spreadsheets で動く Wordle

入力こそ左外側のセルですが(下段のキーボードは入力済のキーを示す役割のみ)、5文字の単語を入れるとsubmitボタンが現れ、ボタンを押すと数秒で正解判定が返ってきます。

正答を得てもSNS共有用のダイアログは出ません。そこは本家と違うところですが。

ゲーム画面の”PLAY”とは別のシート”SETTINGS”はデータ用で、現在プレイしている問題番号、マスクされた正答のリスト、利用できる英単語の辞書、が配置されています。

GitHub にホストされたソースコードでは、Readmeで詳細にスクリプトの作りについて解説があります。200行ちょっとの App Script で、解説を見ながら読み進めるとシンプルでよくできてるなと思いました。

本物のWordleは1日1回ですが、こちらのクローンはメニューに出た”Wordle”から”Start New Game”でいくつでも連続して遊ぶことができます。

via reddit