マーカーネット株式会社

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

javascript(jquery) WEB制作

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

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

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

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

今回も前回と同様「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’
});

2つ上の「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”」の位置を
逆にすれば写真と文章の動きを逆にすることも出来ます。
ぜひお試しください。

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


東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-javascript(jquery), WEB制作

執筆者:

関連記事

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

普通の写真も一風変わった感じに!【Photoshopで写真をミニチュア風に加工】

デザインする時、「この素材写真イマイチだなー」と思ったことありませんか? ここで普通の写真をミニチュア風に加工するPhotoshopの小技をご紹介します。 STEP1 まず加工する写真をPhotosh …

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xでは、404 NOT Foundエラーが発生した場合、 デフォルトでは、 app/View/Errors/error400.ctp の内容が表示されます。 サイトによっては、 40 …

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

先取り!春の色彩のトレンド

こんにちは! web初心者のKです。 暖かくなってきたこの頃、みなさまいかがお過ごしでしょうか? 本日は春に先駆けて、 春色が感じられるサイトを集めてみようと思います。 まずひとつ目はこちら! htt …

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

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

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