マーカーネット株式会社

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

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

関連記事

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

レスポンシブにも対応!② グローバルナビゲーションを作成してみました。

この間はレスポンシブでも使える行ごとのブロック要素の高さを自動で合わせるJavaScriptをご紹介致しました。 レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。 レスポンシブで …

【カメラ撮影】写真素材として撮影するために知っておきたいこと ~風景の色彩編~

WEB制作において”良い写真”は欠かせません。 素材を撮影する際に知っておきたいこと、 今回は風景写真撮影での色設定のポイントをご紹介します。 秋は暖色で情緒を感じさせる 例年11月末~12月初旬あた …

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …