マーカーネット株式会社

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:簡単にグラフを作成する方法!


-javascript(jquery), WEB制作

執筆者:


comment

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

関連記事

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

ワードプレスのテーマの安全性をチェックしてくれる実用的なプラグイン

WordPressのセキュリティを高めてくれるシンプルだけれども実用的なプラグインです。 名前もシンプルです。「AntiVirus」 WordPressで使用しているテーマに悪意のあるコードやセキュリ …

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

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