自主制作デモ

スクロールで
奥行きをつくる

パララックスをはじめとするスクロール連動アニメーションを、 外部ライブラリを使わずCSSとJavaScriptだけで実装したサンプルです。

下へスクロールしてご覧ください

01

多層パララックス

要素ごとに移動量を変えることで、奥行きを生みます。 電車の窓から見る景色で、近くの電柱が速く、遠くの山がゆっくり動くのと同じ原理です。 上部のヘッダーが実際にこの手法で動いています。

使用技術　CSS transform ／ JavaScript requestAnimationFrame

背景
中景
前景
02

画面に入った要素を出現させる

最も使用頻度の高い演出です。要素が画面に入ったことを検知して、 少し下からふわりと現れます。時間差をつけると、視線が自然に上から下へ流れます。

使用技術　IntersectionObserver ／ CSS transition

  • 軽い

    外部ライブラリを読み込まないため、表示速度を損ないません。このページのJavaScriptは約4KBです。

  • 滑らか

    transform と opacity だけを動かし、描画の負荷が高い処理を避けています。

  • 配慮

    動きを控える設定にしている閲覧者には、アニメーションを自動的に停止します。

03

縦スクロールを横移動に変える

画面を固定したまま、縦のスクロール量を横方向の移動に読み替えます。 制作実績や商品の一覧を、印象的に見せたいときに向いています。

使用技術　CSS position: sticky ／ スクロール量の座標変換

01

企画

02

設計

03

実装

04

公開

04

数値を数え上げる

実績値や料金など、数字を印象づけたい箇所で使います。 画面に入った瞬間から数え上げが始まります。

使用技術　IntersectionObserver ／ requestAnimationFrame ／ イージング関数

対応画面幅
0種類
外部ライブラリ
0件
JavaScript
0KB程度
05

スクロールに合わせて開く

スクロール量に応じて、切り抜きの範囲と拡大率を連続的に変化させます。 スクロールを「進める」ほど絵が開いていくため、閲覧者が操作している感覚が生まれます。

使用技術　CSS clip-path ／ scale ／ スクロール量の正規化

MASK & SCALE
技術メモ

実装方針

外部ライブラリを使わない
jQueryやアニメーションライブラリを読み込んでいません。読み込むファイルはHTML・CSS・JavaScriptの3つだけです。表示速度と、公開後の保守のしやすさを優先しています。
描画に負担をかけない
動かすのは transform と opacity に限定しています。要素の幅や位置そのものを毎フレーム書き換える実装は、画面のカクつきの原因になるため避けています。スクロール処理は requestAnimationFrame でまとめ、1フレームにつき1回だけ計算します。
動きが苦手な方への配慮
OS側で「視差効果を減らす」設定にしている閲覧者には、アニメーションを自動的に無効化します（prefers-reduced-motion）。動きによって気分が悪くなる方がいるための、標準的な配慮です。
スマートフォンでの扱い
画面が小さいほど演出は控えめにし、移動量を抑えています。細い端末で横方向の演出を強くかけると、意図しない横スクロールが発生するためです。
JavaScriptが動かない場合
すべての文章と要素は、JavaScriptなしでも読める状態で記述しています。演出が動かなくても内容は伝わります。