旅好きフリーランスの備忘録

プログラミング勉強日記

js・jquery

: モーダルやハンバーガーメニューを開いたときに絶対に背景を動かないようにするコード（iOSも対応）

2024/10/23

モーダルやハンバーガーメニューを開いた際に、背景を動かさないための実装方法を紹介。iOSでも対応可能なコードで、スマホでの背景固定にも対応しています。

html・css js・jquery

: swiper.jsを使用して、右上から左下に向かって階段式に斜めに流れ続けるスライドショー

2024/10/21

swiper.jsを使用し、右上から左下に向かって階段式に流れる無限ループスライダーを実装する方法を解説。シンプルなCSSとJSでの実装も紹介。

html・css js・jquery

: 要素がビューポートの中にあるときだけクラスをつけて背景色を変更する実装

2024/10/18

要素がビューポート内にある間だけクラスを付け、視覚効果を追加する方法を紹介。滑らかなアニメーションで背景色が変わる実装例も解説します。

html・css js・jquery

: jquery-numerator.jsで、スクロールするとカウントアップが一瞬止まるのを解消

2024/10/18

jquery-numerator.jsでカウントアップが一瞬止まる問題を解消する方法を解説。スクロールに応じてスムーズに動作するカウントアップの実装例を紹介します。

js・jquery

: jsを使用して、時間によってページの表示スタイルを変更する実装

2024/10/16

JavaScriptを使って、時間に応じてページのスタイルを自動で切り替える方法を紹介。昼夜に合わせて背景色や画像の表示を変更する実装例です。

js・jquery

: アコーディオン（複数開くのOK ver）

2024/10/15

複数のアコーディオンを同時に開ける仕様を実装。クリックで開閉する簡単なjQueryコードを使い、シンプルなアコーディオンの作り方を解説します。

html・css js・jquery

: アコーディオン（同時に開くのは1つのみ、他のは閉じるver）

2024/10/15

複数のアコーディオンの中で1つだけ開く仕様を実装。クリックで他のアコーディオンを閉じ、選択した項目のみ開く方法をjQueryを使って解説します。

html・css js・jquery

: jsを使用してページ読み込み時に要素の順番をランダムに変更する

2024/10/15

ギャラリーの表示順をページ読み込みごとにランダムに変更するため、JavaScriptで実装したコードを紹介。Fisher-Yatesアルゴリズムを使い、要素の並び替えを実現し、CSSの手間を省く方法を解説します。

js・jquery

: ボタン押下で要素の表示・非表示・ボタンの文言変更要素の数が少ないときはボタン非表示（CSS不要、jQueryのみ）

2024/10/15

jQueryを使用してリストアイテムを4件ずつ表示・非表示にする方法を紹介。ボタンの文言切り替えや、要素が少ない場合のボタン非表示も実装。クラスを使用せず、動的に要素を操作する手法を解説します。

js・jquery

: 周りが暗くなくても使える、スポットライトのような光のぼやっとしたマウスストーカー

2024/10/14

特定エリアのみで表示される美術館風のマウスストーカーを実装しました。背景を暗くせず、PC専用の要件に対応。CSSとjQueryを使用し、マウスの動きに追従するエフェクトを実現しています。

html・css js・jquery

1 2 Next »