on:2015年5月13日sponsorsよく見かけるWebページのインタラクションも、ちょっとした工夫を加えることで新鮮な驚きと感動を与えることができます。Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプトを紹介します。レスポンシブ対応で、実装も非常に簡単です。-GitHubZoom.jsのデモZoom.jsの使い方Zoom.jsのデモデモはMediumのようなレイアウトで、画像がいつか配置されています。デモページ画像をクリック・タップすると、表示されるのが画像だけになり、拡大表示されます。画像を拡大したところここまでの流れだけでもシンプルで無駄がなく気持ちいい動きですが、元画像に戻す(コンテンツに戻る)時は3つの方法が用意されています。拡大画像をクリック・タップ「Esc」キースクロールスクロールで元画像に戻るのは、慣れると非常に便利なインタラクションです。いつものように動きをアニメーションGIFにしてみました。デモのアニメーションGIFここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。HTMLあとは、画像を配置したimg要素にdata属性を加えるだけです。Posts関連記事が見つかりませんでした。