【今までにご紹介したJSの一覧】
面白い動きや便利な機能をJSで実装！ その3：一目で印象に残るアニメーション背景を作成！
面白い動きや便利な機能をJSで実装！ その2：いろんな種類のグラフを簡単に作成！
面白い動きや便利な機能をJSで実装！ その１：簡単にグラフを作成する方法！
今回は画像にリンクなどを付けた際のマウスオーバーの動きを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>
<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>
<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’
});
});
$(‘.bar’).mosaic({
animation : ‘slide’
});
});
これで実装完了となります。
今回はスタンダードな形のマウスオーバーを実装してみました。
他にもいろいろなの動きがありますので、それについてはまたの機会にご紹介したいと思います。
ファイルのダウンロードは下記からお願い致します。
公式サイト
http://buildinternet.com/project/mosaic/