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