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制作

関連記事

WEBサイトの種類を一覧で紹介!目的に合ったWEBサイト制作を行うための知識を身につけよう

WEBサイトの種類を一覧で紹介!目的に合ったWEBサイト制作を行うための知識を身につけよう

WEBサイトは、情報発信・販売促進・ブランド構築・採用活動など、さまざまな目的に応じて作られています。 そのため、自身がネット上でサービスを展開する際には、適切なWEBサイトの種類を選ぶことが成功の鍵 …

製造業のホームページ制作費用相場はどれくらい?制作のポイントや制作会社の選び方も解説!

製造業のホームページ制作費用相場はどれくらい?制作のポイントや制作会社の選び方も解説!

製造業のホームページ制作、その費用は企業規模や目的によって20万円から150万円以上まで大きく異なります。技術力と製品の魅力を効果的に伝えるホームページは、今や製造業のビジネス成長に欠かせないツールで …

競合調査のやり方を徹底解説!チェックすべき項目や注意点、フレームワークもご紹介

競合調査のやり方を徹底解説!チェックすべき項目や注意点、フレームワークもご紹介

ライバル企業の動向を知らずして、ビジネスの勝利はありません。本記事では、競合他社の秘密を解き明かす「競合調査」の極意を徹底解説します。なぜあの会社は成功し、この会社は苦戦しているのか?その答えは、綿密 …

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

ボタンを押すだけ!? 【Photoshop】 フリー  レイヤースタイル ゴールド(金色)系 厳選素材まとめ!

こんにちは。 今回はクリックするだけでゴールド&メタリックな質感のデザインが作れてしまうPhotoshopのレイヤースタイル素材と活用方法についてご紹介いたします。 このフレームを・・・ たっ …

ホームページの維持費はどれくらいかかる?具体的なコストや費用をおさえるためのポイントを解説

ホームページの維持費はどれくらいかかる?具体的なコストや費用をおさえるためのポイントを解説

「自社のホームページを持ちたいけれど、維持費が気になる…」そんな悩みを抱える方は多いのではないでしょうか。本記事では、ホームページの維持費用について、3つの主要な費用カテゴリーに分けて詳し …