How to create a parallax scroll パララックススクロールの作り方
Background moves slower than foreground on scroll, creating depth. Adjust speed ratio. スクロールに応じて背景と前景が異なる速度で動くパララックス効果。速度比を調整できます。
ライブデモ Live Demo
Parallax Effect
Background moves at different speed
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Background moves slower than foreground on scroll, creating depth. Adjust speed ratio.
スクロールに応じて背景と前景が異なる速度で動くパララックス効果。速度比を調整できます。
どこで使うかWhere to use
landing page, marketing site, portfolio, product page
ヒーローセクション、ストーリーテリングページ、ランディングページ、ゲームサイト
特徴Key features
CSS-based parallax scroll where background layers move at different speeds. Multiple depth layers for a 3D scene illusion. Uses background-attachment: fixed or transform: translateY driven by scroll events. No heavy library required.
異なる速度で背景レイヤーが動くCSSベースのパラレックススクロール。3Dシーンイリュージョンのための複数深度レイヤー。background-attachment:fixedまたはスクロールイベント駆動のtransform:translateYを使用。重いライブラリ不要。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--parallax-speed | — | background movement speed ratio (0.1–1.0) |
scroll direction | — | support horizontal scrolling |
multiple layers | — | add depth with multiple layers |
prefers-reduced-motion | — | disable under reduced motion preference |
実装コード Implementation Code
// react/L-003.jsx
import { useEffect, useState } from "react";
import "./L-003.css";
export default function ParallaxScroll() {
const [scrollProgress, setScrollProgress] = useState(0);
useEffect(() => {
const handleScroll = () => {
const container = document.querySelector("[data-parallax-container]");
if (container) {
const rect = container.getBoundingClientRect();
const progress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
setScrollProgress(progress);
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<div className="parallax-container" style={{ ["--scroll-progress"]: scrollProgress }}>
<div className="parallax-bg" />
<div className="parallax-content">Content</div>
</div>
);
}/* react/L-003.css */
.parallax-bg {
position: absolute;
inset: -20%;
background: url('image.jpg') center/cover;
transform: translateY(var(--parallax-offset, 0px));
}import { useEffect, useRef, useState } from "react";
import "./L-003.css";
export default function ParallaxScroll({ speed = 0.5 }) {
const containerRef = useRef(null);
const [parallaxOffset, setParallaxOffset] = useState(0);
useEffect(() => {
const handleScroll = () => {
if (containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const elementTop = rect.top + scrollTop;
const scrollProgress = scrollTop - elementTop;
const offset = scrollProgress * speed;
setParallaxOffset(offset);
}
};
window.addEventListener("scroll", handleScroll);
handleScroll();
return () => window.removeEventListener("scroll", handleScroll);
}, [speed]);
return (
<div
ref={containerRef}
className="parallax-container"
style={{ ["--parallax-offset"]: `${parallaxOffset}px` }}
>
<div className="parallax-bg" />
<div className="parallax-content">
<h3>Parallax Effect</h3>
<p>Background moves at different speed</p>
</div>
</div>
);
}/* Parallax layout styles are now in global.css */仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
Each parallax layer is positioned within a scroll container. A scroll event listener reads window.scrollY and applies a proportional translateY to each layer using a speed multiplier (0 = fixed, 1 = scroll rate, 0.5 = half speed). Layers at different depths move at different rates, creating the parallax depth illusion.
各パラレックスレイヤーはスクロールコンテナ内に配置。スクロールイベントリスナーがwindow.scrollYを読み取り、速度乗数（0=固定、1=スクロール速度、0.5=半速）を使用して各レイヤーにtranslateYを適用。異なる深度のレイヤーが異なる速度で動き、パラレックス深度イリュージョンを作成。
カスタマイズ方法Customization
Adjust the speed multiplier per layer (--parallax-speed) to control the depth illusion strength. Add opacity changes alongside translateY to simulate atmospheric haze. Throttle the scroll handler with requestAnimationFrame to maintain smooth 60fps.
レイヤーごとの速度乗数（--parallax-speed）を調整して深度イリュージョンの強度を制御。大気のかすみをシミュレートするためにtranslateYと並行してopacity変化を追加。requestAnimationFrameでスクロールハンドラをスロットリングして滑らかな60fpsを維持。
注意点Caveats
background-attachment: fixed is poorly supported on iOS Safari — use the JavaScript transform approach for cross-browser compatibility. Provide a prefers-reduced-motion fallback that disables parallax movement to prevent vestibular disorders.
background-attachment:fixedはiOS Safariでサポートが低い — クロスブラウザ互換性のためにJavaScriptのtransformアプローチを使用してください。前庭障害を防ぐためにパラレックス移動を無効化するprefers-reduced-motionフォールバックを提供してください。
よくある質問 Frequently Asked Questions
How to customize the parallax scroll? Parallax Scrollをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the parallax scroll in React? ReactでParallax Scrollを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of parallax scroll? Parallax Scrollのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.