面白い動きや便利な機能をJSで実装！その5：ちょっと変わったマウスオーバーの応用編

投稿日：2015年6月4日更新日：2024年1月19日

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。

今回も前回と同様「Mosaic」というJSを使用します。

デモとパラメータの設定

設置の方法は前回の記事を参照してください。

画像の上に拡大用のアイコンを表示します。

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

画像の全体を暗くし、説明文をその上に表示させます。

$(‘.fade’).mosaic({
animation : ‘fade’
});

説明文を少し表示させた状態で、マウスオーバー時に説明文をすべて表示させます。

$(‘.bar2’).mosaic({
animation : ‘slide’
});

マウスオーバー時に上から説明文が出てきます。

$(‘.bar3’).mosaic({
animation : ‘slide’,
anchor_y : ‘top’
});

初めに説明文を全体に表示させておいて、マウスオーバー時に右にスライドして画像を表示させます。

$(‘.cover’).mosaic({
animation : ‘slide’,
hover_x : ‘320px’
});

２つ上の「bar3」と似ていますが、こちらは画像を下に下げて、説明文が上に出てきます。

$(‘.cover2’).mosaic({
animation : ‘slide’,
anchor_y : ‘top’,
hover_y : ’80px’
});

画像を右上に飛ばし、説明文を表示します。

$(‘.cover3’).mosaic({
animation : ‘slide’,
hover_x : ‘400px’,
hover_y : ‘300px’
});

以上となります。
また、「class=”mosaic-overlay”」と「class=”mosaic-backdrop”」の位置を
逆にすれば写真と文章の動きを逆にすることも出来ます。
ぜひお試しください。