AMIXは、動きのあるWebパーツを集めた「CRAZY Code」を公開しました。ボタンから火花が散る、カードが割れる、液体がたまるなど、操作に反応するサンプルをブラウザで試し、コードをコピーして利用できます。
20の区画に、120本の動くサンプルを収録
公開時点で、爆発・クリック演出、グリッチ、崩壊テキスト、液体・粘性、重力・バウンド、過剰ホバーなど20の区画を用意しました。各区画には6本のサンプルがあり、押す、なぞる、長押しするなどの操作で動きを確かめられます。
例えば「液体・粘性」には、押し続けた場所から液体を注ぐ演出や、ぷるぷると揺れるカード、水面に波紋を立てる演出があります。動きの見本を探すときや、キャンペーン・404ページなどの試作に使うパーツを検討するときに利用できます。
HTML・CSS・JavaScriptと使い方をまとめて確認
各サンプルの「全部コピー」から、HTML・CSS・JavaScriptをまとめて取得できます。コピーするコードはバニラJavaScriptで、依存ライブラリを追加せずに使える構成です。無料・登録不要で、商用利用にも対応しています。利用条件はサイト内のライセンスをご確認ください。
「使い方」には、設置方法に加えて、粒の量や動く時間など、どの値を変えると何が変わるかを記載しています。コードと説明をAIコーディングの際に渡し、色や動きの強さ、実行するタイミングなどを調整する使い方もできます。
使う場所に合わせて、動きの強さを選ぶ
CRAZY Codeは、驚きのある演出を試すためのパーツ集です。重要な送信操作や読み進めたい本文に強い動きを加えると、操作や閲覧を妨げる場合があります。組み込む際は使う場面を選び、既存のレイアウトや端末での動作を確認してください。
OSの動きを減らす設定に応じて演出を弱める処理も含まれています。日常的なボタンや見出しには「Web BENTO CSS」、タブやモーダルなどのUIには「Web BENTO JS」もあわせて参照できます。
