MOTION — RESTRAINED SET
気づかれないほど、静かに応える。
YAMATO のページで使う動きの見本です。写真がわずかに引いて止まり、見出しが一文字ずつにじむ。ここから先も、ひとつずつ確かめられます。
MOTION — RESTRAINED SET
YAMATO のページで使う動きの見本です。写真がわずかに引いて止まり、見出しが一文字ずつにじむ。ここから先も、ひとつずつ確かめられます。
どのブランド面にも使ってよい既定の3つ。まずはこれだけで組み、足りないと感じても足さない。
画面に入った要素が、下から静かに現れる。同じ瞬間に入ったものは、少しずつ遅れて順に並ぶ。
要素に class="de-reveal" → de.reveal('.de-reveal')
見出しが一文字ずつ、ぼやけた状態から焦点を結ぶ。表紙の一行か、章の扉の一行にだけ使う。
ここでは、何者でもなくていい。
de.stagger('h1') — 和文は自動で文字単位。1ページ1か所まで
カーソルを重ねた場所に、暖かい光がゆっくり灯る。見せ場の一枚だけに使い、タッチ端末では灯らない。
この一枚にだけ、光を宿す。
ページの中で最も見てほしい一枚を選び、ほかのカードには使わない。光は面を塗らず、手元を照らす程度にとどめる。
de.spotlight('.feature', { intensity: 0.12 })
提案書やオーナー資料のように、数字や手順で納得してもらう面で使う。どれも画面に入ったときに一度だけ動き、止まる。
大事な数字だけが、ゼロから今の値まで数え上がる。並べるのは3つまで。
数字に data-de-count="1953"（HTMLには最終値を書く）→ de.count('[data-de-count]')
棒が値の長さまで伸びて止まる。下は、この見本で使っている動きの長さ。主役の「現れる」だけ金で示している。
単位はミリ秒。表紙の寄り（14,000）は桁が違うので外している。
棒に class="de-bar"、中の <i style="--de-w:50%"> → 親を de.grow('#bars')
手順をつなぐ細い線が、上から下へ引かれる。順番に意味があるときだけ使う。下は、この見本をページに取り込む手順。
de-base.css と design-engine.js を2行で読み込む。de-reveal などのクラスを付ける。de.init()。線を引く箱に class="de-line"（位置は --de-line-x）→ de.grow('#steps')
写真の帯を章のあいだに挟むと、読む手が一度止まる。スクロールすると、写真だけが少し遅れて流れる。
帯に <img> を1枚 → de.parallax('.band', { amount: 8 })。1ページに2本まで
Harbor 南房総
動きは足すほど安くなる。ブランド面では次のものを使わない。
magnetic / proximity / tilt）。