
【フェーダー】画像の表示・非表示にプラグインを利用【jquery.inview.js】
jQueryプラグインのjquery.inview.jsを利用します。特定の要素に対し、ブラウザの表示領域内と表示領域外に分けて処理が実行できます。ブラウザの表示領域内では画像を順番にフェードイン、表示領域外では画像を非表示にする、イメージフェーダーのサンプルです。
jQueryプラグインのjquery.inview.jsを利用します。特定の要素に対し、ブラウザの表示領域内と表示領域外に分けて処理が実行できます。ブラウザの表示領域内では画像を順番にフェードイン、表示領域外では画像を非表示にする、イメージフェーダーのサンプルです。
ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。
カテゴリーの判別はjQueryのhasClassを利用します。
画像が飛び出すように順番にフェードインで表示される、イメージフェーダーのサンプルです。
jQueryでaddClassして、CSSのanimationで飛び出すようなフェードインを実装しています。 CSSのtransitionは使用していません。
画像が下から上へ移動しながら順番にフェードインで表示される、イメージフェーダーのサンプルです。
CSSのtransitionを使用せず、jQueryのanimateのみで実装しています。
プラグインを使用せず、自作でレスポンシブのタブメニューを実装します。タブの切り替えでコンテンツをフェードインして表示する動作になります。
Bootstrap4を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを画面中央に表示、モーダルウィンドウ内で縦スクロール、特大サイズのモーダルウィンドウを表示、といった新機能があります。なおhtmlのコードは、Bootstrap3から一部変更箇所があります。
Bootstrap3を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを表示で背景のスクロールバーは非表示となり、スクロールできなくなります。また、背景をクリックしてもモーダルウィンドウを閉じない動作や、モーダルウィンドウの表示サイズ変更もオプションで簡単に実装できます。
アコーディオンメニューの開くボタン・閉じるボタンを1つの画像で実装しています。開くボタンは下向き矢印の画像、閉じるボタンは開くボタンをCSSで180度回転させた上向き矢印の画像です。
アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンがプラス(+)、閉じるボタンがマイナス(-)です。画像は使用していません。
サンプルはメインメニュー・サブメニューのナビゲーションです。
アコーディオンメニューの開くボタン・閉じるボタンをCSSのみで作成しています。形状は開くボタンが下向き矢印、閉じるボタンが上向き矢印です。画像は使用していません。
よくあるご質問(FAQ)をサンプルにしています。