GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

css パララックス 背景 9選 — 奥行き3Dシーン

· Godrich · 9種 · 13分で読める

インタラクション素のJSSCSSホバー自動再生ヒーローLP

css パララックス 背景 のアニメーションを9パターンまとめました。02番の層は距離に応じてピントがぼやけ、07番の層は距離に応じて影が薄くなり、09番のシーンはその二つの計算を同じ画面に重ねる。

層ごとに異なる速度でずれる図形パララックス背景01 depth3d-shape-layer-parallax 距離に応じてピントがぼやけるボケ背景02 depth3d-bokeh-blur-falloff 層ごとにゆっくり流れるグラデーションメッシュ背景03 depth3d-gradient-mesh-drift 地平線に向かって狭まる遠近グリッド床04 depth3d-grid-floor-perspective ポインターに合わせて傾く軌道衛星リング05 depth3d-orbit-ring-satellites 層ごとに薄くなる光の筋の背景06 depth3d-light-shaft-depth 高さに応じて影が大きくなる浮遊カード07 depth3d-card-float-shadow-depth 距離に応じて実時間で拡大縮小する粒子背景08 depth3d-scale-depth-sizing 複数の奥行き層を一画面にまとめたヒーロー背景シーン09 depth3d-hero-scene-composite

自動再生 · タイルを押すとその項目へ · すべて1つのzip

css パララックス 背景 9つ — 層ごとに違う計算が積み重なる奥行き

以下の9つはすべて同じ2Dキャンバスループの上で動いています。距離やポインターの値を読み取り、オフセット・ぼかし・不透明度・傾きのどれかに変換して、実際に動いたピクセルだけを描き直すという流れです。項目01はそのループが一番わかりやすく現れた層で、保存した奥行き値の逆数で視差のオフセットが決まる図形の集まりです。項目05になると同じループが固定の奥行きの代わりにポインター位置を読み取ってリングを傾け、項目09では視差・ぼかし・遠近・傾き・影・拡大縮小をひとつのヒーローシーンにまとめています — これはマウス 追従 アニメーション css で作る3D場面9選が背景の代わりにカードをポインターに追従させているのと同じ重ね方です。以下の並びは1枚の視差層から、ぼかしと漂い、格子の遠近、軌道の傾き、光の減衰、影の高さを経て、最後にすべてを合わせた複合シーンへと進みます。

01距離ごとに違う速さで視差する浮遊図形

distanceMultiplier() は図形が持つ仮想の奥行き値をオフセットの倍率に変換し、stepSim() はポインターの動きをその倍率でなめらかに反映させます。奥行きの浅い図形ほど大きく動き、深い図形はほとんど動かないため、層ごとの視差の差がひと目でわかります。

層ごとに異なる速度でずれる図形パララックス背景
新しいタブで開く

01 · 層ごとに異なる速度でずれる図形パララックス背景 — 計測 累積面積 20.586% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

distanceMultiplierINERTIA_LERP_RATEPARALLAX_REF_DISTANCE_PX
  function stepSim(dtMs) {
    var dtS = dtMs / 1000;
    var rate = Math.min(1, INERTIA_LERP_RATE * dtS);
    for (var i = 0; i < shapes.length; i += 1) {
      var s = shapes[i];
      var mult = distanceMultiplier(s.distancePx);
      var tx = pointerNormX * PARALLAX_MAX_OFFSET_PX * mult;
      var ty = pointerNormY * PARALLAX_MAX_OFFSET_PX * mult * 0.6;
      s.curX += (tx - s.curX) * rate;
      s.curY += (ty - s.curY) * rate;
    }
  }

  function drawScene() {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    ctx.clearRect(0, 0, cw, ch);
    for (var i = 0; i < shapes.length; i += 1) {
      var s = shapes[i];
      var alpha = Math.max(0.35, Math.min(1, 1 - s.distancePx / 190));
      var dx = (s.baseX + s.curX) * sx, dy = (s.baseY + s.curY) * sy;

項目01は面積20.6%・強度平均61.1で、23/23 フレームが動きました。

02距離をシミュレートしてピントがぼやける背景

focalDepthAt() は FOCAL_CYCLE_MS 4200のサイン波でピントの位置を前後に動かし、blurForDepth() がその位置との距離を DEPTH_BLUR_MAX_PX 14を上限としたぼかし量に変換します。ピントが今どこにあるかによって、手前の円と奥の円のどちらがくっきり見えるかが入れ替わります。

距離に応じてピントがぼやけるボケ背景
新しいタブで開く

02 · 距離に応じてピントがぼやけるボケ背景 — 計測 累積面積 16.966% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

blurForDepthDEPTH_BLUR_MAX_PXfocalDepthAt
  function focalDepthAt(t) {
    var f = (Math.sin(t / FOCAL_CYCLE_MS * Math.PI * 2) + 1) / 2;
    return FOCAL_RANGE_NEAR + f * (FOCAL_RANGE_FAR - FOCAL_RANGE_NEAR);
  }

  function blurForDepth(distancePx, focalDepth) {
    var diff = Math.abs(distancePx - focalDepth);
    return Math.max(0, Math.min(DEPTH_BLUR_MAX_PX, diff / 9));
  }

  var elapsed = 0;
  var cw = 480, ch = 300;

  function drawScene(nowMs) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    var savg = (sx + sy) / 2;
    var focalDepth = focalDepthAt(nowMs);
    ctx.clearRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
    var order = circles.slice().sort(function (a, b) { return b.distancePx - a.distancePx; });
    for (var i = 0; i < order.length; i += 1) {
      var c = order[i];
      var blurPx = blurForDepth(c.distancePx, focalDepth);

項目02は面積17.0%・強度平均15.1で、15/23 フレームが動きました — ピントの周期がゆっくりな分、動きの少ない区間が長く続くため9項目の中で最も低い値です。

03層ごとに違う速さで漂うグラデーションメッシュ

blobPositionAt() は各ブロブを自分専用の reachPx で幅を決めたサイン波に沿って動かし、MESH_LAYER_COUNT 5層に振り分けた MESH_DRIFT_PERIOD_BASE_MS で漂う速さを層ごとに変えます。drawScene() は globalCompositeOperation を lighter にした上で各ブロブごとの createRadialGradient() を重ねるため、重なった部分は単に色が積み重なるのではなく明るくなります。

層ごとにゆっくり流れるグラデーションメッシュ背景
新しいタブで開く

03 · 層ごとにゆっくり流れるグラデーションメッシュ背景 — 計測 累積面積 52.471% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

blobPositionAtMESH_DRIFT_PERIOD_BASE_MSMESH_LAYER_COUNT
  function blobPositionAt(layer, t) {
    var ax = Math.sin(t / layer.period * Math.PI * 2 + layer.phaseX) * layer.reachPx;
    var ay = Math.cos(t / layer.period * Math.PI * 2.3 + layer.phaseY) * layer.reachPx * 0.7;
    return { x: layer.centerX + ax, y: layer.centerY + ay };
  }

  var elapsed = 0;
  var cw = 480, ch = 300;

  function drawScene(nowMs) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    var savg = (sx + sy) / 2;
    ctx.clearRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 0; i < meshLayers.length; i += 1) {
      var layer = meshLayers[i];
      var pos = blobPositionAt(layer, nowMs);
      var alpha = Math.max(0.3, 0.72 - layer.depthIndex * 0.1);
      var dx = pos.x * sx, dy = pos.y * sy, dr = layer.radius * savg;
      var g = ctx.createRadialGradient(dx, dy, 0, dx, dy, dr);
      g.addColorStop(0, layer.color);
      g.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.globalAlpha = alpha;

項目03は面積52.5%・強度平均20.9で、23/23 フレームが動きました — 9項目の中でもっとも広い面積を塗り替えています。

04水平線に向かって収束する遠近グリッド床

projectGridPoint() は GRID_PERSPECTIVE_PX 800を各行の奥行きで割って平らな床のグリッドを一点の水平線へ収束させ、nudgeCamHeight() は仮想カメラの高さが変わるたびにその水平線の位置をずらします。9項目のうち seedRand() を呼ばないのはこの項目だけで、グリッドの行と水平線が固定位置から始まり乱数を必要としないためです。

地平線に向かって狭まる遠近グリッド床
新しいタブで開く

04 · 地平線に向かって狭まる遠近グリッド床 — 計測 累積面積 23.426% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

projectGridPointGRID_PERSPECTIVE_PXnudgeCamHeight
  function projectGridPoint(xWorld, zWorld) {
    var z = Math.max(4, zWorld);
    var scale = GRID_PERSPECTIVE_PX / (z * 40);
    return {
      x: CALC_W * 0.5 + (xWorld - viewOffsetX) * scale,
      y: HORIZON_Y + camHeight * scale
    };
  }

  var elapsed = 0;
  var scrollZ = 0;
  var cw = 480, ch = 300;

  function drawScene() {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    ctx.clearRect(0, 0, cw, ch);

    ctx.fillStyle = 'rgba(255,140,40,.16)';
    var sunR = 30 + Math.sin(elapsed * 0.0009) * 4;
    ctx.beginPath();
    ctx.arc(CALC_W * 0.5 * sx, HORIZON_Y * sy, sunR * sx, 0, Math.PI * 2);
    ctx.fill();

項目04は面積23.4%・強度平均39.8で、23/23 フレームが動きました。

05ポインターを追って傾く軌道衛星リング

zSortSatellites() は毎フレーム computeTransformed() の奥行きで衛星の描画順を並べ替えるため、リングの奥へ回った衛星は手前の衛星より先に描かれます。ポインターの動きはリング全体を ORBIT_TILT_MAX_DEG 18を上限に傾け、各衛星の並べ替えに使われる奥行きもその同じ傾き角から決まります。

ポインターに合わせて傾く軌道衛星リング
新しいタブで開く

05 · ポインターに合わせて傾く軌道衛星リング — 計測 累積面積 10.212% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

zSortSatellitesORBIT_TILT_MAX_DEGcomputeTransformed
  function satelliteAngleAt(sat, t) {
    return sat.baseAngle + t * ANGULAR_SPEED;
  }

  var tiltDeg = 0, azimuthOffset = 0;
  var pointerActive = false;

  function computeTransformed(sat, t) {
    var ang = satelliteAngleAt(sat, t) + azimuthOffset;
    var r = RING_RADIUS * sat.radiusScale;
    var lx = Math.cos(ang) * r;
    var lz = Math.sin(ang) * r;
    var tiltRad = tiltDeg * Math.PI / 180;
    var ry = -lz * Math.sin(tiltRad);
    var rz = lz * Math.cos(tiltRad);
    return { x: lx, y: ry, z: rz };
  }

  function zSortSatellites(list, t) {
    var withZ = list.map(function (sat) {
      var p = computeTransformed(sat, t);
      return { sat: sat, p: p };
    });

項目05は面積10.2%・強度平均106.0で、23/23 フレームが動きました — 9項目の中でもっとも狭い面積を、高い強度と組み合わせています。

06層ごとにフェードするライトシャフト背景

shaftOpacityForDepth() は LIGHT_SHAFT_DECAY 0.42で指数的に減衰する計算を行い、SHAFT_LAYER_COUNT 7本のシャフトは depthFor() の値が光源から遠いほど速く消えていきます。drawScene() は globalCompositeOperation を lighter にしてすべてのシャフトを重ねるため、交差する部分は打ち消し合わずに明るくなります。

層ごとに薄くなる光の筋の背景
新しいタブで開く

06 · 層ごとに薄くなる光の筋の背景 — 計測 累積面積 30.528% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

shaftOpacityForDepthLIGHT_SHAFT_DECAYSHAFT_LAYER_COUNT
  function depthFor(shaft, t) {
    return shaft.distanceBase + Math.sin(t * shaft.swaySpeed + shaft.phase) * shaft.swayRange;
  }

  function shaftOpacityForDepth(depth) {
    var v = Math.exp(-LIGHT_SHAFT_DECAY * depth) * MAX_OPACITY;
    return Math.max(0, Math.min(MAX_OPACITY, v));
  }

  var elapsed = 0;
  var cw = 480, ch = 300;

  function drawScene(t) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    ctx.clearRect(0, 0, cw, ch);

    ctx.fillStyle = 'rgba(60,40,120,.55)';
    ctx.beginPath();
    ctx.arc(SOURCE_X * sx, SOURCE_Y * sy, 10 * sx, 0, Math.PI * 2);
    ctx.fill();

    ctx.globalCompositeOperation = 'lighter';
    for (var i = 0; i < shafts.length; i += 1) {

項目06は面積30.5%・強度平均21.6で、23/23 フレームが動きました。

07高さに応じて影が伸びる浮遊カード

cardBobAt() は CARD_FLOAT_AMPLITUDE_PX 22を上限にしたサイン波で各カードを上下させ、shadowForHeight() はその高さをぼかし半径・不透明度・横方向の影の伸びに変換します。カードが浮き上がった瞬間は影が広く薄くなり、沈んだ瞬間は同じ式のまま影が狭く濃くなります。

高さに応じて影が大きくなる浮遊カード
新しいタブで開く

07 · 高さに応じて影が大きくなる浮遊カード — 計測 累積面積 21.405% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

shadowForHeightcardBobAtCARD_FLOAT_AMPLITUDE_PX
  function cardBobAt(card, t) {
    return (Math.sin(t * card.bobSpeed + card.phase) * 0.5 + 0.5) * CARD_FLOAT_AMPLITUDE_PX;
  }

  function shadowForHeight(h) {
    var norm = h / CARD_FLOAT_AMPLITUDE_PX;
    return {
      blur: 3 + norm * 13,
      alpha: 0.4 - norm * 0.26,
      scaleX: 1 + norm * 0.35
    };
  }

  var elapsed = 0;
  var cw = 480, ch = 300;

  function drawScene(t) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    ctx.clearRect(0, 0, cw, ch);

    for (var i = 0; i < cards.length; i += 1) {
      var card = cards[i];
      var h = cardBobAt(card, t);

項目07は面積21.4%・強度平均129.0で、23/23 フレームが動きました — 9項目の中でもっとも高い平均強度です。

08距離をシミュレートして拡大縮小するパーティクル背景

zAt() は各パーティクルの奥行きを自分専用の zAdvanceSpeed() で手前へ進め、PARTICLE_Z_MAX 120を超えると奥の面へ巻き戻します。sizeForDepth() は固定の FOCAL 60をその時点の奥行きで割って画面上の半径に変換するため、手前にあるパーティクルほど大きく描かれます。

距離に応じて実時間で拡大縮小する粒子背景
新しいタブで開く

08 · 距離に応じて実時間で拡大縮小する粒子背景 — 計測 累積面積 30.615% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

sizeForDepthzAdvanceSpeedPARTICLE_Z_MAX
  function zAdvanceSpeed(p) {
    return 0.012 * p.speedScale;
  }

  function zAt(p, t) {
    var raw = (p.zOffset - t * zAdvanceSpeed(p)) % PARTICLE_Z_MAX;
    if (raw < 0) raw += PARTICLE_Z_MAX;
    return raw + 1;
  }

  function sizeForDepth(z) {
    var v = (FOCAL / z) * 3.4;
    return Math.max(0.8, Math.min(7, v));
  }

  var elapsed = 0;
  var cw = 480, ch = 300;

  function drawScene(t) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    ctx.clearRect(0, 0, cw, ch);

    for (var i = 0; i < particles.length; i += 1) {

項目08は面積30.6%・強度平均94.4で、23/23 フレームが動きました。

09奥行き層のすべての技法をひとつにまとめたヒーロー背景シーン

ソース内のコメントには、同じポインター入力の上で6つの技法を1つのシーンに重ねると明記されています — 項目01の視差と項目04の遠近グリッドは、それぞれ独自の distanceMultiplier() と projectGridPoint() としてこのファイル内だけで再定義され、HERO_ を冠した3つの定数が項目02のような奥行きぼかしと項目05のようなポインター傾きを、それぞれの視差の届きとともにスケールします。残る2つ — 項目07の高さに応じた影の不透明度と項目08の奥行きに応じた拡大縮小 — も shadowForHeight() や sizeForDepth() を呼ぶのではなく、それぞれ独自のインライン計算として書き直されており、6つすべてが他の8ファイルから読み込まれるのではなくこの1ファイルの中だけで再現されています。

複数の奥行き層を一画面にまとめたヒーロー背景シーン
新しいタブで開く

09 · 複数の奥行き層を一画面にまとめたヒーロー背景シーン — 計測 累積面積 23.106% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

HERO_ORBIT_TILT_MAX_DEGHERO_PARALLAX_REF_DISTANCE_PXHERO_BLUR_MAX_PX
  function drawScene(t, dtS) {
    var sx = cw / CALC_W, sy = ch / CALC_H;
    var viewOffsetX = nx * 42;
    var tiltDeg = ny * HERO_ORBIT_TILT_MAX_DEG;
    var azimuthOffset = nx * 0.7;

    var targetOffsetX = nx * 14, targetOffsetY = ny * 9;
    var rate = Math.min(1, INERTIA_LERP_RATE * dtS);
    offsetCur += (targetOffsetX - offsetCur) * rate;
    offsetCurY += (targetOffsetY - offsetCurY) * rate;
    var pointerDistancePx = Math.max(20, Math.hypot(offsetCur, offsetCurY) * 6 + 60);
    var mult = distanceMultiplier(pointerDistancePx);

    ctx.clearRect(0, 0, cw, ch);

    ctx.strokeStyle = 'rgba(140,150,230,.5)';
    ctx.lineWidth = 1;
    for (var r = 1; r <= ROW_COUNT; r += 1) {
      var z = r * ROW_SPACING - scrollZ;
      if (z <= 2) continue;
      var pL = projectGridPoint(-COL_COUNT * COL_SPACING * 0.5, z, viewOffsetX);
      var pR = projectGridPoint(COL_COUNT * COL_SPACING * 0.5, z, viewOffsetX);
      ctx.beginPath();

項目09は面積23.1%・強度平均59.8で、23/23 フレームが動きました。

奥行き層の種類別コード

この9つはすべて CALC_W/CALC_H 160×100という同じ計算空間を共有し、fit() がキャンバス要素の実測サイズに合わせて拡大縮小するため、奥行きの計算自体はページの実ピクセルサイズを一切気にしません。prefers-reduced-motion は9つすべてで matchMedia を通じて読み取られ、常時オンの自動再生フラグを残すのではなく、読み込み時に一度だけ自前の .is-demo クラスを外します。9項目のうち5つ — 項目01・02・04・05・09 — は keydown も監視していて、マウスが動かすのと同じポインター駆動の値をキーボードだけで動かせるため、css 3d animation codepen としてコピーしてもキーボード操作だけで動きます。9項目のうち8つはローカルの seedRand() で乱数を決めていますが、項目04だけは例外で、グリッドの行と水平線が固定位置から始まるため乱数の初期値を必要としません。この9つはどれも css 背景画像 パララックス の考え方を、静止画像ではなくキャンバス計算に置き換えたものです。

項目03の重なり合うグラデーションブロブはどの層よりも広い面積を塗り替え、項目07の影付きカードはもっとも高い平均強度で動き、項目02のゆっくりしたピント移動はもっとも低い強度で、15/23 フレームしか動かなかった唯一の項目です。

層 累積面積 平均強度 動いたフレーム
01 図形の視差 20.6% 61.1 23/23
02 ボケの遠近ぼかし 17.0% 15.1 15/23
03 グラデーションメッシュの漂い 52.5% 20.9 23/23
04 遠近グリッド床 23.4% 39.8 23/23
05 軌道リングの傾き 10.2% 106.0 23/23
06 ライトシャフトの減衰 30.5% 21.6 23/23
07 浮遊カードの影 21.4% 129.0 23/23
08 パーティクルの奥行き拡縮 30.6% 94.4 23/23
09 ヒーロー複合シーン 23.1% 59.8 23/23

値が奥行きを変える場所 — 距離・ぼかし・影・傾き

下の3つの定数がほとんどの奥行き感を決めています。DEPTH_BLUR_MAX_PX は項目02のもっとも遠い円がどこまでぼやけられるかを、GRID_PERSPECTIVE_PX は項目04の床グリッドが水平線へどれだけ鋭く収束するかを、ORBIT_TILT_MAX_DEG は項目05の衛星リングが平らな状態からどれだけ傾けるかを決めます。3つとも描かれるもの自体は変えず、同じ背景がどれだけ立体的な css パララックス 背景 に見えるかだけを変えるという点が、横に動くだけのアニメーションと奥行き層のあるシーンの違いのほとんどを占めています。css ボタン 立体感 9種 — クリックまで再現も背景層全体ではなく1つのホバーボタンの上で、似た傾きの定数を調整しています。

どこで壊れるか — 動作を減らす設定・狭い画面・層が多いとき

この9つすべてで matchMedia を使って prefers-reduced-motion を読み取り、キャンバス自体を止めるのではなく読み込み時に自動再生用の .is-demo クラスを外しています。そのため項目05は実際にポインターが動いたときだけリングが傾き、項目09も実際にポインターを動かしたときだけシーンが動きます。fit() は160×100の計算空間をキャンバス要素の実測サイズに合わせて縮小するため、狭いスマートフォン幅では奥行きの計算自体は変えずに各層の見た目のサイズだけが小さくなります。低スペック端末で特に注意したいのは項目03で、MESH_LAYER_COUNT 5層のグラデーションブロブがそれぞれ globalCompositeOperation を lighter にして独自の createRadialGradient() を描くため、すでに面積52.5%を塗り替えており、同じ方法で層を増やせば重力や描画よりも先にこの組み合わせでフレームが落ちやすくなります。これら9つのビルドの裏にある index.html/style.scss のペア(gt5gztk5)は、これだけ少ない css パララックス 背景 のコードで9つ同時に動かせることを確かめる一番早い方法です。

変形3つとアクセシビリティ

バリエーション 値の変更 感触
最大ぼかし半径を調整する 02 DEPTH_BLUR_MAX_PX 14 → 28 値を下げるともっとも遠い層でもわずかにしかぼやけず場面が平坦に見え、上げると遠い層が強くぼやけて奥行きの差がはっきりします。
遠近の強さを調整する 04 GRID_PERSPECTIVE_PX 800 → 400 値を下げると床グリッドが鋭く収束して遠近感が強調され、上げると収束がゆるんで場面が平らな背景のように見えます。
最大軌道傾斜角を調整する 05 ORBIT_TILT_MAX_DEG 18 → 32 値を下げるとポインターを大きく動かしても軌道リングはほぼ平らなままで、上げるとわずかなポインターの動きでもリングが大きく傾きます。

9項目すべてが自分のスクリプトの先頭で一度だけ prefers-reduced-motion を確認し、個々のプロパティを止めるのではなく自動再生クラスを外すことで応じているため、動作を減らしたい訪問者にも空白のキャンバスではなく静止した層が見えます。矢印キーは9項目のうち5つ、項目01・02・04・05・09で使え、これらは keydown を監視して仮想ポインター・フォーカス位置・カメラのオフセット・傾き角・ヒーローシーンの視点のいずれかをマウスなしで動かせます。MDNには3つとも文書化されています。CanvasRenderingContext2D は描画面そのもの、requestAnimationFrame() はそれを駆動するループ、prefers-reduced-motion は上のアクセシビリティ確認の裏にあるメディアクエリです。

css 背景 固定 パララックス は奥行きシーンで何を計算しているのか?

この9つはどれも3Dエンジンや WebGL コンテキストを読み込んでいません。距離に応じた倍率、ピント距離に応じたぼかし、遠近除算によるグリッド投影、傾きに応じたzソート、単純なzからサイズへの変換のどれかを、すべて素の CanvasRenderingContext2D の呼び出しだけで描いています。9項目のうち8つは開始位置や角度をローカルの seedRand() で決めているため再読み込みしても毎回同じ見た目になりますが、項目04だけは例外で、グリッドの行と水平線が固定位置から始まるため乱数シードを必要としません。3D 地球儀サイト演出9選 — Three.jsなしのcanvas計算も、層状の背景の代わりに回転する球へ点を投影する似た計算をライブラリなしで行っています。

css パララックス 背景 レイヤーのFAQ でよくある質問

この9つはビルド手順なしで css パララックス 背景 の代わりにそのまま使えますか?

はい。どのデモもスクリプトを内蔵した単一の index.html で完結しているため、ファイルと対になる style.scss をコピーするだけで動きます。バンドラーにも外部の3Dライブラリにも依存していません。

項目02の動いたフレームが他より少ないのはなぜですか?

項目02のピント位置は FOCAL_CYCLE_MS 4200というゆっくりしたサイン波で前後に動くため、23フレームのうち大きなぼかしの変化として記録されるのは15フレームだけで、残り8項目はすべて23/23 フレームで動いています。

この9つの奥行き層に WebGL や3Dライブラリは必要ですか?

必要ありません。ここにある9つはどれも距離の倍率・遠近除算・zソート・zからサイズへの変換のいずれかで奥行きを計算していて、WebGL コンテキストも読み込んだエンジンも一切使っていません。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。