javascript(jquery) WEB制作

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

投稿日:2025年10月22日 更新日:

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。
今回使用する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サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

マーカーネットブログ 編集部

マーカーネット株式会社のスタッフが、WEB制作・SEO・マーケティングに関する最新情報や実務に基づいたノウハウをわかりやすく発信しています。

-javascript(jquery), WEB制作

関連記事

動物病院のホームページ制作のポイントとは?掲載すべき内容や作成時の注意点について解説!

動物病院のホームページ制作のポイントとは?掲載すべき内容や作成時の注意点について解説!

動物病院のサイトは、情報の透明性とスタッフの顔が見える安心感を伝え、予約のしやすさを追求することが集客成功の鍵です。 ペットを飼う世帯が急増する現代において、動物病院の集客方法も大きく変化しています。 …

不動産会社のホームページ制作費用相場を解説!価格が変動する理由や制作のポイントもご紹介

不動産会社のホームページ制作費用相場を解説!価格が変動する理由や制作のポイントもご紹介

不動産ホームページ制作の記事 不動産HP制作は、目的や予算に応じた最適な手法を選び、物件検索などの機能性と信頼性を両立させる設計が成功の要諦である。 不動産会社のホームページを制作する際、費用の相場が …

WEBデザインとは?概要や実際の制作の流れ、制作会社に依頼するときの注意点を徹底解説!

WEBデザインとは?概要や実際の制作の流れ、制作会社に依頼するときの注意点を徹底解説!

Webデザインの本質は見た目の美しさだけでなく、ユーザーの使いやすさとビジネスの目的達成を両立させる「設計」にあります。 WEB制作においては、ユーザビリティを高めるために、WEBデザインが重要となり …

Webサイトのリニューアルにかかる費用をサイトの種類ごとに徹底解説!やるべきこともご紹介

Webサイトのリニューアルにかかる費用をサイトの種類ごとに徹底解説!やるべきこともご紹介

サイトリニューアルの費用は規模や機能で変動するため、相場を把握し事前準備を徹底することが、コストを抑え成功させる鍵です。   多くの企業が感じているWebサイトの課題。しかし、いざリニューア …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …