マーカーネット株式会社

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

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

関連記事

ホームページに掲載するメールアドレスはエンティティ化で迷惑メール排除

なんかホームページ公開したら急に迷惑メール増えたなぁ。 という方、ホームページにそのままメールアドレスを掲載していませんか? ホームページは全世界に公開されているもので、当然テキスト情報も全て公開され …

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …

失敗しないSEOサイトリニューアル16のポイント!

SEOで失敗しないサイトリニューアル16のポイント! 簡単のようで簡単ではない、いつも心掛けるべきWEBサイトリニューアル時のポイントを記載しました。 WEBサイトのリニューアルは、成功の是非がはっき …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …