almost 5 years ago

Focus の遷移にアニメーションをつけてくれるライブラリ"Flying Focus"を使ってみました

Flying Focus

Webページを開いてTabキーを連打するとボタンやテキストエリアに次々とフォーカスが移っていきますよね?
近くの要素だとまだ目が追いつくんですがページのあちこちに飛ばれるとどこにフォーカスが移ったかすぐにわからなくなってしまします。

そんなフォーカスのかゆいところに手が届くライブラリが"Flying Focus"です

実際にどう動くかは動画を見ていただけるとわかると思います
あまりに自然すぎて気づかないかもしれませんが フォーカスが遷移するアニメーションが加わっています

Chrome や Safari の拡張もありますが今回はWebサイトにライブラリとして取り込む方法を紹介します。
といっても<script>タグを使って読みこむだけでOKです!
ソースは"Flying Focus"のサイトの下の方にあるstandalone JS fileから取得することができます。

注意

導入は簡単なんですが唯一の注意点があってflying-focus.jsの中でdocument.body.appendChild(flyingFocus);という文が使われているためライブラリを<head>タグの中で読んでしまうと<body>が未だ生成されておらずdocument.bodyがnullになってしまうためにエラーを吐いてしまします。
なので"Flying Focus"を読み込むのは</body>の直前を推奨します。
つまり

    ...
    <script src="http://n12v.com/focus-transition/flying-focus.js"></script>
</body>

こんな感じですね!

← (0,1) がコンパクトでないことの証明 Win8アプリをプログラムから終了させる →
 
comments powered by Disqus