マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

投稿日:2015年7月17日 更新日:

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。
今回使用する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”>

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



-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …

ホームページに掲載するメールアドレスはエンティティ化で迷惑メール排除

なんかホームページ公開したら急に迷惑メール増えたなぁ。 という方、ホームページにそのままメールアドレスを掲載していませんか? ホームページは全世界に公開されているもので、当然テキスト情報も全て公開され …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

多言語対応で1000億円の経済効果!WEBサイトも多言語化を

近ごろのニュースで、訪日観光客の増加という記事をよく見かけるようになりました。東京の街を歩いても日本への訪日客が増えたことを実感できるほど外国語が飛び交ってますね。2015年は【多言語化元年】と言われ …

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …