記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。
今回使用するjavascriptは「zoom.js」になります。
【これまでの関連記事】
面白い動きや便利な機能をJSで実装！ その5：ちょっと変わったマウスオーバーの応用編
面白い動きや便利な機能をJSで実装！ その4：ちょっと変わったマウスオーバーを実装してみました。
面白い動きや便利な機能をJSで実装！ その3：一目で印象に残るアニメーション背景を作成！
面白い動きや便利な機能をJSで実装！ その2：いろんな種類のグラフを簡単に作成！
面白い動きや便利な機能をJSで実装！ その1：簡単にグラフを作成する方法！
目次
デモ
画像をクリックでアニメーション拡大されます。
実装方法
jqueryとJSを設置致します。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”[ファイルへのパス]/zoom.js”>
<script src=”[ファイルへのパス]/zoom.js”>
CSSも用意されていますので、そちらもお忘れなく追加してください。
<link rel=”stylesheet” type=”text/css” href=”[ファイルへのパス]/zoom.css”>
アニメーションの動きがBootstrapを利用していますので、
Bootstrapを追加致します。
<script src=”[ファイルへのパス]/bootstrap.min.js”></script>
ソースの設置
アニメーションを実装したい画像にdata属性を追加してください。
<img src=”[ファイルへのパス]/001.jpg” data-action=”zoom”>
これで実装完了です。
是非お試しください。
ファイルのダウンロードは下記からお願い致します。
http://fat.github.io/zoom.js/
https://github.com/fat/zoom.js