*

Masonryのギャラリーの画像にホバーしたときに動きを付けてみる

公開日: : 最終更新日:2015/10/29 jQuery ,

今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがでるようしてみました。
サンプルコードの実行結果はこちら

今回使用したプラグイン
・Mansonry
・imagesloaded
・colorbox

index.html

galleryFillterHoverEffect.js

スポンサードリンク

関連記事

jQuery

ついてくるヘッダーメニューを作成する

タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。 サンプルコードの実

記事を読む

jQuery

画面を下にスクロールさせると、違うデザインのメニューがついてくる

タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しまし

記事を読む

jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。

記事を読む

catejQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた テーブルの事です。偶数行(列)、奇数行

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

catejQuery

表示状態を切り替える fadeIn()/fadeOut()

fadeIn()/fadeOut()は、文字通りです。 フェードイン・フェードアウトしながらHTM

記事を読む

catejQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたら ページのトップへ滑らかに遷移するというものを jQueryを使っ

記事を読む

catejQuery

透明度を少しづつ変更する fadeTo()

fadeTo()は、セレクターで指定した要素の 透明度(CSSのopacityプロパティ)を、設定

記事を読む

jQuery

class属性の追加・削除

class属性は、ほかの属性とは違い、スペース区切って複数の値を設定できます。class属性の操作に

記事を読む

jQuery

タブを作成して、空間を最大限に使う

今回はパネルを使って、複数のコンテンツを1つのエリアに配置して、ブラウザ上部に設けたタブをクリックす

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑