マーカーネット株式会社

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

javascript(jquery) WEB制作

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

投稿日:2015年4月16日 更新日:

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

今回は画像にリンクなどを付けた際のマウスオーバーの動きをJSで実装してみたいと思います。

通常は画像にリンクを貼っただけでは特殊な動きはしません。
マウスポインタの形が手になるくらいです。
それだと寂しいので、そこに効果を付けていきます。
画像のマウスオーバーの効果でよく見かけるのは画像が透過したり、
別の画像に切り変わったりだと思います。

ご紹介するのはマウスオーバー時に画像の上に文字を表示させる方法です。
「Mosaic」というJSで説明文などをマウスオーバーで表示できます。

デモ

実装方法

jqueryと今回使用するJS、CSSを設置します。

<link href=”[ファイルへのパス]/mosaic.css” type=”text/css” rel=”stylesheet”>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”[ファイルへのパス]/mosaic.1.0.1.min_.js”></script>

CSS内に画像ファイルへのパスがありますので、任意の場所へ変更してください。

ソースの設置

<div class=”mosaic-block bar”>
<p class=”details”><a href=”#” target=”_blank” class=”mosaic-overlay”>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</a></p>
<p class=”mosaic-backdrop”><img src=”[ファイルへのパス]/001.jpg”/></p>
</div>

パラメータの設定

$(document).ready(function(){
$(‘.bar’).mosaic({
animation : ‘slide’
});
});

これで実装完了となります。

今回はスタンダードな形のマウスオーバーを実装してみました。
他にもいろいろなの動きがありますので、それについてはまたの機会にご紹介したいと思います。

ファイルのダウンロードは下記からお願い致します。
公式サイト
http://buildinternet.com/project/mosaic/



-javascript(jquery), WEB制作

執筆者:


comment

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

関連記事

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

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

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

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-1-

こんばんは、デザイナーのOです。 実は私はグラフィックデザイナー出身で、約1年半前にWeb業界に入りました。 Webについてまだまだ勉強中の自分ですが、 実際にWeb制作に携わって感じた、グラフィック …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …