動く素材

背景と装飾を実物で試し、調整した単一HTMLを持ち帰る場所です。

選び方#

構造を組む部品はパターン集、構造へ重ねる表現はこの素材集から選びます。一覧では静止画で比べ、詳細ページで一件だけ動かします。

分類から選ぶ#

全35件を3つに分けています。

• 背景エフェクト画面全体へ敷き、文字の後ろで静かに動く表現
• CSS装飾Canvasを使わず、軽い構造とCSSで足せる表現

背景エフェクト#

画面全体へ敷き、文字の後ろで静かに動く表現。全29件。背景エフェクトのページへ

• オーロラ
• 桜吹雪
• 雲
• 残り火
• 蛍
• グリッドライン
• 落ち葉
• 葉
• 稲妻
• もみじ
• 波打つ点の格子
• 映写機のちらつき
• 雨
• 波紋
• 桜
• きらめき
• 雪
• 火花
• 星空
• スタースピード
• ステータスアップ
• 蒸気
• ヴィンテージフィルム
• 波紋ウェーブ
• 波
• 炎
• 流れる雲
• 水面
• ワイヤーフレームの波

CSS装飾#

Canvasを使わず、軽い構造とCSSで足せる表現。全6件。CSS装飾のページへ

• 光源の面
• 斜めの光条
• ぼかしBlob
• 放射状グロー
• ドット格子
• 斜め光条

使う前の確認#

• 背景を止めても見出しとボタンの順序が伝わる
• 動きの少ない設定を端末から選べる
• 実際の文字色と背景でコントラストを測る
• 一覧画面で複数のCanvasを同時に動かさない