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