桜が舞うアニメーション ジェネレーター

CSSとJavaScriptで、画面上部から風に吹かれながら優雅に舞い散る桜の花びらのアニメーションコードを生成します。

アニメーション付きハンバーガーメニュー ジェネレーター

CSSとJavaScriptで、クリック時に3本線からバツ印へ変化するハンバーガーボタンと、画面外からスライドインするサイドメニューを自由にカスタマイズしてコード生成します。

万華鏡ジェネレーター

CSSとJavaScriptで、Canvasを使用し幾何学模様が中心から対称に広がり色鮮やかに変化する万華鏡のような背景アニメーションを生成します。

3Dエンドロール ジェネレーター

CSSとJavaScriptで、映画のオープニングやエンディングのように画面の奥へ向かって流れる立体的な3Dテキストのスクロール演出を生成します。

モーダルウィンドウ ジェネレーター

CSSとJavaScriptで、表示位置、サイズ、開閉アニメーション、暗転オーバーレイの有無などを細かくカスタマイズできるモーダルウィンドウを生成します。

マトリックス風デジタルレイン ジェネレーター

CSSとJavaScriptで、映画「マトリックス」のように上から下へとグリーンのコード文字が流れ落ちるデジタルレイン背景エフェクトを生成します。

紙吹雪が舞うアニメーション ジェネレーター

CSSとJavaScriptで、指定したボタンをクリックした際などに画面内に色とりどりの紙吹雪がランダムに舞い落ちる演出を生成します。

波紋アニメーション ジェネレーター

CSSとJavaScriptで、クリックやタップした位置を中心に、同心円状の波紋が広がりながら消えていくインタラクティブなUIエフェクトを生成します。

スポットライトUI ジェネレーター

CSSとJavaScriptで、マウスカーソルの動きに合わせて指定範囲をスポットライトのように明るく照らし、周囲を暗くマスクするインタラクティブなUIを生成します。

画像比較スライダー

2枚の画像を重ねて、スライダーのドラッグ操作で左右に切り替えてビフォーアフターを比較できるインタラクティブな画像比較UIツールです。HTML/CSS/JSコードを取得できます。

3Dに傾く透過カードのCSSジェネレーター

マウスの動きに合わせて傾き、表面に光が反射したような効果を持つ透過カードのデザインを生成します。

JavaScript カラーコード変換実装コード生成ツール

HEX（16進数）やRGBなどのカラーコードを相互に変換するJavaScriptの実装コードを生成します。

JavaScriptでマウスホイールの回転方向を検出する実装コード

JavaScriptでマウスホイールの回転方向（上・下）を検出するイベントの実装コードを生成します。

JavaScriptで現在時刻をリアルタイムに表示するコード生成ツール

現在時刻をリアルタイムに更新・表示するJavaScriptコードを生成します。フォーマットをカスタマイズ可能です。

スクロール量で背景色を変化させるJSコード生成ツール

スクロール量に応じて背景色を滑らかに変化させるJavaScriptコードを生成します。色の段階や切り替え位置を自由に設定可能です。

JavaScriptでクリックを検出するイベントの動作テストツール

右クリックや左クリック、またはダブルクリックを検出するJavaScriptのイベント動作テストができます。

JavaScriptでHTTPSかどうかを判定する動作テストツール

現在のページがHTTPSでアクセスされているか、HTTPでアクセスされているかを判定するJavaScriptコードを生成します。

JavaScriptの長押しイベントを実装するコード生成ツール

左クリックやタップ長押しのイベントを実装するためのJavaScriptコードを生成します。長押しの時間設定や動作確認が可能です。

JavaScriptのcloneNode()を利用した動作確認ツール

JavaScriptのcloneNode()を使ってHTML要素を複製数するコードを生成し、動作を確認できます。

MutationObserver()を利用したJavaScriptコードの動作確認ツール

DOMの変更（要素の追加・削除、属性変化など）を監視するMutationObserver()の動作をリアルタイムで確認できます。

JavaScriptの経過時間を表示するコード生成ツール

ページ読み込み時や特定の日時からの経過時間を表示するコードを生成します。秒のみ、日時分秒などの形式を選択可能です。

JavaScriptのscrollIntoView()を利用した画面スクロールの動作確認ツール

要素の位置までスムーズにスクロールするscrollIntoView()の動作を確認できます。オプション（behavior, block）の効果を視覚的に試せます。

JavaScriptのIntersectionObserver()を利用した動作確認ツール

スクロールして要素が画面内に入ったことを検知し、アニメーション表示させるコードを生成します。移動距離や時間を調整可能です。

JSONとJSオブジェクトの相互変換ツール

JSONコードとJavaScriptのオブジェクト(Object)コードを相互変換します。