モーダルウィンドウ 【モーダルウィンドウ】jquery.magnific-popup.jsにフェードイン・フェードアウトの動作を実装
jQueryプラグインのjquery.magnific-popup.jsのオプション設定とCSSを利用して、モーダルウィンドウ表示時のフェードイン・フェードアウトの動作を実装します。
2019-11
モーダルウィンドウ 
マウスオーバー 【マウスオーバー】CSSのobject-fitとofi.min.jsで画像の表示領域サイズ固定に対応
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。画像にはCSSのobject-fitを設定し、object-fit未対応のIE11用にofi.min.jsを利用します。
アコーディオンメニュー 【アコーディオンメニュー】コンテンツをアニメーションでソートして表示【jquery.mixitup.js】
jQueryプラグインのjquery.mixitup.jsを利用して、アニメーション付きでコンテンツをソートして表示します。プラグインのバージョンはv2.1.11です。ソートメニューはPC表示でマウスオーバーで展開するプルダウンメニュー、スマホ表示でアコーディオンメニューです。
モーダルウィンドウ 【モーダルウィンドウ】jquery.magnific-popup.jsを利用してYouTubeの動画を再生
jQueryプラグインのjquery.magnific-popup.jsを利用して、モーダルウィンドウ内にYouTubeの動画を再生します。動画はレスポンシブ対応にします。
フェーダー 【フェーダー】左から右へカーテンを開くように画像を順番に表示
左から右へカーテンを開くように画像が順番に表示される、イメージフェーダーのサンプルです。jQueryでaddClassして、CSSのanimationで動きを実装しています。
モーダルウィンドウ 【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【jquery.magnific-popup.js】
jQueryプラグインのjquery.magnific-popup.jsを利用します。レスポンシブ対応で、bodyのスクロールバーは非表示です。html内のソースをidで指定してモーダルウィンドウ内に表示します。
フォーム 【フォーム】jQuery UIのButtonでフォーム部品等をボタン化
jQuery UIのButtonを利用して、buttonタグ、input type="button"、input type="submit"、aタグ、input type="checkbox"、input type="radio"をボタン化します。
アコーディオンメニュー 【アコーディオンメニュー】プルダウンメニューをスマホ表示でアコーディオン化
PC表示でマウスオーバーで展開するプルダウンメニューを、スマホ表示でアコーディオンメニューにします。htmlとCSSのみで実装し、スマホ表示のみjQueryでtoggleClassを利用します。
フェーダー 【フェーダー】画像にグラデーションのアニメーション効果を実装するプラグイン【granim.js】
jQueryプラグインのgranim.jsを利用します。画像にグラデーションのアニメーション効果を実装できます。
フェーダー 【フェーダー】プラグインを利用して数値をカウントアップ表示【jquery-numerator.js】
jQueryプラグインのjquery-numerator.jsを利用します。テキストの数値をアニメーションでカウントアップして表示します。