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



弊社では社内制作にこだわるHTML構築技術から、WEBサイトの正確なコーディングをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

コーディング最適化

WEBサイト制作実績3,000サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

-javascript(jquery), WEB制作

関連記事

【Illustrator】幾何学模様の作り方

【Illustrator】幾何学模様の作り方

みなさまこんにちは、新人Aです。 三角形で作る幾何学模様の作り方をご紹介します。 これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、 少し面倒ですがパ …

ランディングページを改善するための方法20選!適切なLPO対策でCV率を上げよう

ランディングページを改善するための方法20選!適切なLPO対策でCV率を上げよう

「なぜ訪問者が増えても問い合わせが増えないの?」この悩み、解決します。業界20年のプロが厳選した即実践できるLPO施策を大公開。PASONAの法則で導線を最適化し、コンバージョンボタンのたった1つの変 …

ホームページの管理は何をすればいい?具体的な方法や委託する場合の費用について解説

ホームページの管理は何をすればいい?具体的な方法や委託する場合の費用について解説

「御社のホームページ、最後に更新したのはいつですか?」企業サイトの多くは公開後に放置され、情報が古くなり、セキュリティリスクも高まっています。実はホームページは公開してからが本番。適切な管理なしでは、 …

ホームページ制作を自分で行うことは可能!具体的な流れや便利ツールを一挙にご紹介!

ホームページ制作を自分で行うことは可能!具体的な流れや便利ツールを一挙にご紹介!

ホームページ制作。かつては専門家の領域と思われていたこの分野が、今や多くの人にとって身近なものとなっています。技術の進歩により、無料のツールやサービスを活用すれば、プログラミングの知識がなくても基本的 …

ホームページの保守とは何をすべき?作業内容やかかる費用などをまとめて解説!

ホームページの保守とは何をすべき?作業内容やかかる費用などをまとめて解説!

持続的にWEBサイトの運営をしていくために、必要不可欠な「ホームページの保守」。その重要性は十分に認識されているでしょうか。ドメイン管理から最新のセキュリティ対策まで、保守作業は多岐にわたります。適切 …