CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.13
CRAZY度 ★★★★ ─ 文字の躾に失敗しました

タイポ暴走

文字そのものは壊さずに、動き方と振る舞いだけを暴走させた6本です。3Dプリンタのように刷り上がる見出し、打ったそばから書き直してくるタイプライター、勝手に縦書きへ組み替わるコピーなど、日本語の見出しで映えるように作っています。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-0013Dプリントされる見出しCRAZY度 ★★★★★
寝かせた台の上で、見出しが1層ずつ刷り上がっていきます。刷り終わると文字が起き上がって正面を向き、カーソルの向きに傾きます。押すと刷り直します。
CSS 3Dclip-pathばねの動きWeb Audio

これは何？

同じ文字を22枚の薄い層にして重ね、3Dプリンタのように下の層から1枚ずつ刷り上げる見出しです。刷ったばかりの層はオレンジに光り、少しして冷めた色に戻ります。最後の層が刷れると、寝ていた文字が起き上がって正面を向きます。

使い方

  1. 「全部コピー」して、ページのHTMLに貼り付けます。
  2. 文字を変えるときは、data-text と aria-label の両方を書き換えます。
  3. 画面に入ったときに一度だけ自動で刷ります。押すか、Enter・スペースで刷り直します。刷り上がったあとは矢印キーでも傾けられます。

カスタマイズ

  • 層の数は LAYERS（22）、刷り上がるまでの時間は PRINT_MS（2600ミリ秒）です。
  • 刷り上がったあとの向きは REST、表の面の色は #DFFF3E、側面の色は mix() に渡している2色です。

注意

文字を22回複製して重ねるので、長い文には向きません。5〜8文字ほどの見出しに使ってください。フォントは端末に入っている太字を使うため、端末によって字形が変わります。

S-002打ち返すタイプライターCRAZY度 ★★★★
打った文字が紙に打たれますが、手を止めると主導権を奪われます。打った文は赤い×で潰され、別の文が打ち返されます。
inputPromiseCSS animationWeb Audio

これは何？

入力欄に打った文字が、1文字ずつタイプライターで紙に打たれていきます。手を1.3秒止めると、タイプライターが勝手に動き出し、打った文を後ろから赤い×で潰して改行し、別の文を打ち返します。打ち返す文はだんだん速くなります。紙のほうが左右に動き、行末ではベルが鳴って改行します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. Enter を押すと、待たずにすぐ打ち返します。
  3. 日本語入力の変換中は紙に打たず、確定してから打ちます。

カスタマイズ

  • 打ち返す文は REPLIES です。u に利用者が打った文が入ります。最初のあいさつは GREETING です。
  • 奪うまでの待ち時間は 1300、速くなる度合いは gap() の 150 - k * 9、1行の文字数は COLS（20）です。

注意

入力した文はどこにも送らず、画面の中だけで使います。打ち返している間は、入力欄が読み取り専用になります。

S-003太さが波打つ見出しPC推奨CRAZY度 ★★★★
カーソルの下の字が太り、両隣が細くなり、幅が増えた字は隣を押しのけます。押すと、ふくらみが波になって左右へ走り、端で跳ね返ります。
Pointer Events波動方程式text-strokeWeb Audio

これは何？

見出しの1文字ずつをばねでつないだ「弦」として動かし、ふくらんだ字ほど太く、幅広く、明るく描く見出しです。カーソルの真下の字は太り、その両隣は細くなります。カーソルを速く動かすほど大きくふくらみ、押した場所からは波が左右へ走って、端で跳ね返ります。音をONにすると、弾いた字が弦の音で鳴ります。

使い方

  1. 「全部コピー」して貼り付けます。文字は h2 の中を書き換えるだけです。
  2. スマホでは、指でなぞるとふくらみ、たたくと弾けます。
  3. キーボードでは、左右キーで位置を選び、Enter かスペースで弾きます。

カスタマイズ

  • 波の伝わる速さは 90、元に戻る強さは 16、揺れの収まり方は 2.6、カーソルで押す強さは 700 です。
  • 弾く強さは hit() の 22、色は THIN（細い）・BASE・FAT（太い）です。

注意

可変フォントは使わず、端末のフォントの太さ（100〜900）に縁取りと字幅の伸び縮みを足して、太さが連続して変わるように見せています。フォントの読み込みはいりませんが、太さの段階が少ない書体では、太さの切り替わりに段差が出ることがあります。

S-004文字の蛇PC推奨CRAZY度 ★★★★★
カーソルを近づけると、文が先頭の字からほどけて一列でついてきます。止まると周りを回って輪になり、離れると元の文に戻ります。
Pointer Eventsパス追従ステアリング

これは何？

1行の文が、カーソルを近づけると先頭の字から順にほどけ、蛇のように一列でついてくる演出です。字は先頭が通った道の上に並ぶので、曲がると文も曲がります。カーソルを止めると周りを回り、文がちょうど一周する輪になります。枠から出ると、先頭から順に元の並びへ戻ります。

使い方

  1. 「全部コピー」して貼り付けます。文は data-text と aria-label を書き換えます。
  2. 押すと急に走り出し、ふくらみが頭から尻尾へ伝わります。
  3. キーボードでは、矢印キーで行き先を動かし、Enter で走らせ、Esc で元の文に戻します。

カスタマイズ

  • 追いかける速さは 430（押したときは 2.2 倍）、蛇行の大きさは 150、くねる速さは clock * 9 です。
  • 輪になるまでの待ち時間は .7 秒、字の大きさの上限は 28 です。

注意

スマホでは、文字に触れたまま指を動かすと追ってきます。文字のない所を縦になぞったときは、ふつうにページがスクロールします。文が長いほど字が小さくなるので、20文字ほどまでにしてください。

S-005歌い出す文字CRAZY度 ★★★
入力した言葉を1文字ずつ歌わせます。音の高さに合わせて字が跳ね、光る玉が字から字へ跳び移ります。
Web Audioフォルマント合成Web Animations

これは何？

入力した言葉に節をつけ、1文字ずつ歌わせる見出しです。高い音の字ほど高く跳び、カラオケの玉のように光る玉が次の字へ跳び移ります。音をONにすると、のこぎり波を母音の響き（フォルマント）に通した合成の声で歌います。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 入力欄の言葉を書き換えて「歌わせる」を押すか、Enter を押します。
  3. ひらがなとカタカナは母音を読み取ります。「ー」は前の音を伸ばし、「っ」・句読点・空白は休みになります。漢字は文字コードから母音を決めます。

カスタマイズ

  • 1文字の長さは BEAT（0.24秒）、音階は SCALE、声の高さは sing() の 233 です。
  • 跳ねる高さは hop() の 10 + n.deg * 5 です。

注意

節は言葉から決めるので、同じ言葉なら毎回同じ節になります。読み上げ（音声合成）ではないので、言葉としては聞き取れず、母音でハミングする程度です。音が鳴るのは、要素に data-sound があってボタンを押したときだけです。

S-006勝手に組み替わるコピーCRAZY度 ★★★★★
見出しが横書き・縦書き・円・階段・波・逆立ち・ばらばらへ勝手に組み替わります。同じ字は跳び移り、ない字だけが裏返って入れ替わります。
Web AnimationsFLIP縦書きの約物Web Audio

これは何？

見出しのコピーが、3.2秒ごとに横書き・縦書き・円・階段・波・逆立ち・ばらばらへ組み替わります。前の文と同じ字は放物線を描いて跳び移り、前の文にない字だけが裏返って入れ替わります。たとえば「横書き」から「縦書き」へは、「横」だけが「縦」に裏返ります。縦書きでは長音を縦に回し、句読点を字の右上へ寄せます。

使い方

  1. 「全部コピー」して貼り付けます。
  2. ボタンを押すとその組み方に、盤を押すと次の組み方に変わります。押したあと9秒間は、勝手に切り替わりません。

カスタマイズ

  • 組み方ごとの文は PHRASE です。縦書きの文に | を入れると、そこで列を折り返します。
  • 順番は ORDER、切り替わる間隔は AUTO_MS（3200ミリ秒）です。
  • 跳び移る時間は 640、字ごとのずれは 38 ミリ秒です。

注意

字は1文字を1字幅として並べるので、半角の英数字が多い文では間が空きます。動きを減らす設定の端末では、勝手に切り替えるのをやめ、押したときだけ一瞬で組み替えます。