DESIGN STUDY · ANIMATION
Grid lines
Grid lines
draw the room.
Content arrives last.
グリッド線が水平→垂直の順に描画され、最後にコンテンツが面のなかへ落ちてくる。Stripe / Linear ライクな静かな立ち上がり。
使い方
— USAGE
01
3 ファイルをコピー
本ディレクトリの index.html / style.css / script.js を移植先にコピー。CSS と JS は外部依存ゼロ。
02
マークアップを配置
<section class="grid-reveal" data-grid-reveal> の中に <svg class="gr-grid"> と <div class="gr-content"> を入れる。テキスト要素には data-reveal="N" でリビール順を指定。
03
パラメータ調整
CSS 変数で全てチューニング可能。--gr-cell（マス目サイズ）、--gr-line（線色）、--gr-draw（線描画時間）、--gr-stagger（線間スタガー）。
カスタマイズ可能な CSS 変数
--gr-cellマス目の 1 辺サイズ（px）72px--gr-lineグリッド線の色rgba(10,10,10,.12)--gr-line-strong強調線（10 マス毎）の色rgba(10,10,10,.3)--gr-draw1 本の線を描画する時間700ms--gr-stagger線と線の間隔40ms--gr-content-delay線描画完了→コンテンツ開始までの間200ms--gr-reveal1 コンテンツのフェードイン時間800ms