← 一覧へ

parallax/CParallax

コンテナとコンテンツにクラスを付与するだけで縦方向のパララックスを実現する、依存ゼロの素のJS。コンテンツを動きの幅（addPixelRange・既定40px）だけコンテナより高くするスタイルを自動付与し、コンテナが画面を通過する間にその余白分を translate3d で動かすため、どのスクロール位置でも隙間が出ない。動きの幅と中心点のずらし（offsetY）はPC/SPで別の値を指定でき、値はpxのほか rem / em / vh / vw の単位付きでも書ける。要素ごとの修飾クラスで有効デバイス（js-plx--pc / js-plx--sp）・方向の反転（js-plx--reverse）・overflow: hidden の無効化（js-plx--visible）を制御でき、戻り値の関数を呼ぶと監視を解除して付与したスタイルも元に戻る。

Init Options

Option Type Default Description
container string '.js-plx' 対象コンテナのセレクタ。overflow: hidden が自動付与される
content string '.js-plx__in' コンテナ内で動かすコンテンツのセレクタ。img / video など object-fit が効く要素を想定
addPixelRange number | string | { pc?, sp? } 40 動きの幅。この分だけコンテンツをコンテナより高くし、スクロールに応じて動かす。数値(px)のほか '3rem' 等の単位付き文字列（px / rem / em / vh / vw）や { pc, sp } でのPC/SP別指定に対応
offsetY number | string | { pc?, sp? } 0 移動の中心点の縦ずらし。+で下寄り / −で上寄りに表示される。ずらした分の高さは自動で上乗せされるため隙間は出ない。単位付き文字列・PC/SP別指定も可
media 'all' | 'pc' | 'sp' 'all' 修飾クラス（js-plx--pc / js-plx--sp）のない要素に適用する有効デバイス
breakpoint number 768 PC/SPの境界(px)。この値以上をPCとして扱う
pcClass string 'js-plx--pc' PCのみ有効にする修飾クラス名
spClass string 'js-plx--sp' SPのみ有効にする修飾クラス名
visibleClass string 'js-plx--visible' overflow: hidden を付与しない（はみ出しを見せる）修飾クラス名
reverseClass string 'js-plx--reverse' 動きの方向を反転する（スクロールより速く見える）修飾クラス名

HTML Classes

Class / Attr Type Default Description
.js-plx class — パララックスのコンテナに付与する。高さはCSS側で指定しておくこと
.js-plx__in class — 動かすコンテンツに付与する。width: 100% / height: calc(100% + 動き幅) / object-fit: cover / object-position: center が自動付与される
.js-plx--pc class — この要素をPC（breakpoint以上）のみ有効にする。optionsのmediaより優先
.js-plx--sp class — この要素をSP（breakpoint未満）のみ有効にする。optionsのmediaより優先
.js-plx--visible class — この要素に overflow: hidden を付与せず、はみ出しを見せる
.js-plx--reverse class — この要素の動きの方向を反転する（スクロールより速く見える）
data-plx-range attribute addPixelRange 要素ごとに動きの幅を上書きする。コンテナに付与する。'3rem' 等の単位付きも可
data-plx-range-pc / -sp attribute data-plx-range PC / SP専用の動きの幅。data-plx-range より優先。片方だけの指定も可
data-plx-offset attribute offsetY 要素ごとに移動の中心点の縦ずらしを上書きする。単位付きも可
data-plx-offset-pc / -sp attribute data-plx-offset PC / SP専用の縦ずらし。data-plx-offset より優先。片方だけの指定も可

Demos

ページをスクロールすると、各ボックス内の画像がスクロールよりゆっくり動く（横線の位置で動きが確認できる）。動きの幅・方向・中心点・有効デバイスはすべてHTML側のクラス・data属性で制御している。デモ3・4はウィンドウ幅を768pxの前後で変えると有効/無効が、デモ6は動き幅が切り替わる。デモ1〜7は素のマークアップ、デモ8はAstroコンポーネント版。

1. 基本（全デバイスで有効）

コンテナに js-plx、コンテンツに js-plx__in を付与して parallax() を呼ぶだけ。スクロールに合わせて画像が既定の40px分ゆっくり動く。必要なスタイル（overflow: hidden や高さの上乗せ）はJSが自動付与する。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

2. 動きの幅を要素ごとに変更

コンテナに data-plx-range を付与すると、その要素だけ動きの幅(px)を上書きできる。この例は 120px。JSを呼び直す必要はない。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx" data-plx-range="120">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

3. PCのみ有効

コンテナに js-plx--pc を追加すると、その要素は768px以上でのみパララックスが動く。SP幅では付与スタイルごとリセットされ、素の表示に戻る。ウィンドウ幅を変えて確認できる。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx js-plx--pc">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

4. SPのみ有効

コンテナに js-plx--sp を追加すると、その要素は768px未満でのみパララックスが動く。PC幅では静止画として表示される。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx js-plx--sp">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

5. 方向を反転

コンテナに js-plx--reverse を追加すると動きの方向が反転し、スクロールより速く動いて見える。上のデモ（通常方向）と見比べると視差の対比がわかる。クラス名は options の reverseClass で変更できる。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx js-plx--reverse">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

6. PC/SPで動きの幅を変える・単位付き指定

data-plx-range-pc / data-plx-range-sp でPCとSPの動き幅を別々に指定できる（data-plx-range より優先。optionsなら addPixelRange: { pc, sp }）。値は px のほか rem / em / vh / vw の単位付きでも書ける。この例はPCで8rem、SPで30px。ウィンドウ幅を768pxの前後で変えると動き幅が切り替わる。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx" data-plx-range-pc="8rem" data-plx-range-sp="30">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

7. 移動の中心点をずらす

data-plx-offset（optionsなら offsetY）で移動の中心点を縦にずらせる。+で下寄り / −で上寄りに表示され、ずらした分の高さはJSが自動で上乗せするため、どのスクロール位置でも隙間は出ない。この例は-60px（上寄り）。PC/SP別に指定する場合は data-plx-offset-pc / -sp を使う。

コードを見る 
import { parallax } from 'form-snippets';

<div class="js-plx" data-plx-offset="-60">
  <img class="js-plx__in" src="..." alt="">
</div>

parallax();

8. Astroコンポーネントとして使う

はコンテナ・コンテンツのマークアップとクラス・data属性を自動で組み立て、初期化スクリプトも自身に内包する。呼び出し側で parallax() を呼ぶ必要はない。初期化スクリプトの中身はどのインスタンスでも同一なので、ページ内に がいくつあってもAstroのスクリプト重複排除により実行は1回だけになる。range / offset はPC/SP別指定、単位付き文字列にも対応。media・reverse・visible props でクラス版の js-plx--pc / --sp / --reverse / --visible と同じ制御ができる。

コードを見る 
import CParallax from 'form-snippets/CParallax.astro';

<CParallax
  src="..."
  alt=""
  range={{ pc: 80, sp: 30 }}
  offset="-1rem"
/>