ホーム

アコーディオンメニュー

【アコーディオンメニュー】1つ開くと他は閉じる場合
【アコーディオンメニュー】開くボタン・閉じるボタンをフォントの反転で実装する場合
【アコーディオンメニュー】コンテンツの表示数を指定して表示
【アコーディオンメニュー】最初のアコーディオンメニューのみ開いた状態でページを表示
【アコーディオンメニュー】コンテンツの最大数を指定して表示

カレンダー

【カレンダー】FullCalendarのイベントをマウスオーバーでツールチップを表示
【カレンダー】プラグインでカレンダー表示【fullcalendar.js】

タブメニュー

【タブメニュー】WP REST APIで他サイトの投稿記事データをJSON形式で取得
【タブメニュー】複数のタブメニューとセレクトボックスの選択を連動
【タブメニュー】指定のタブまたはセレクトボックスを選択して移動
【タブメニュー】タブメニューとセレクトボックスの選択を連動
【タブメニュー】SP表示でセレクトボックスに切り替え

ツールチップ

【ツールチップ】Bootstrap4のツールチップとポップオーバー
【ツールチップ】プラグインでツールチップ表示【popper.js・tooltip.js】
【ツールチップ】クリッカブルマップをマウスオーバーでマウスに追従

フェーダー

【フェーダー】画像の表示・非表示にプラグインを利用【jquery.waypoints.min.js】
【フェーダー】左から右へカーテンを開くように画像を順番に表示
【フェーダー】画像にグラデーションのアニメーション効果を実装するプラグイン【granim.js】
【フェーダー】プラグインを利用して数値をカウントアップ表示【jquery-numerator.js】
【フェーダー】スライダーを使わずにjQueryでスライドショーを実装

フォーム

【フォーム】ラジオボタンとチェックボックスで複合的に絞り込み検索
【フォーム】jQuery UIのButtonでフォーム部品等をボタン化
【フォーム】選択したチェックボックスのテキストを表示
【フォーム】お問合せ入力フォームのエラーチェック【jquery.validate.min.js】
【フォーム】開始日時と終了日時を比較してエラーチェック

マウスオーバー

【マウスオーバー】CSSのみで画像内にキャプションを表示
【マウスオーバー】CSSのobject-fitとofi.min.jsで画像の表示領域サイズ固定に対応
【マウスオーバー】画像をマウスオーバーで反転させてテキスト表示
【マウスオーバー】画像の縦スクロール表示
【マウスオーバー】画像をマウスオーバーでメニューを表示

マップ

【マップ】Googleマップにカラーオバーレイを適用
【マップ】Googleマップのマイマップでルート表示する際の縮尺指定
【マップ】Googleマップを遅延表示してページの表示速度を改善
【マップ】現在位置を取得してGoogleマップにマーカーを表示
【マップ】Googleマップのルート表示

ムービー

【ムービー】初回ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生
【ムービー】ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生【レスポンシブ編】
【ムービー】ページ表示時にモーダルウィンドウでYoutubeの動画を自動再生
【ムービー】Youtube IFrame Player APIで複数の動画を自動再生
【ムービー】オリジナルのサムネイル画像クリックでYoutubeの動画を再生

モーダルウィンドウ

【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【modaal.js】
【モーダルウィンドウ】jquery.magnific-popup.jsにフェードイン・フェードアウトの動作を実装
【モーダルウィンドウ】jquery.magnific-popup.jsを利用してYouTubeの動画を再生
【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【jquery.magnific-popup.js】
【モーダルウィンドウ】プラグインを利用せずjQueryで実装

レスポンシブ

【レスポンシブ】JavaScriptのwindow.matchMediaメソッドを利用した画像切り替え
【レスポンシブ】クリッカブルマップのレスポンシブ対応【jquery.rwdImageMaps.js】
【レスポンシブ】jQueryを利用した画像切り替え
WEB制作 活用事例 サンプル
タイトルとURLをコピーしました