M-012 Animation medium

How to create a scroll reveal fade スクロールリビールの作り方

Fade-in effect for elements as they scroll into the viewport. スクロールして画面内に入った要素をフェードインさせるエフェクト。

scroll reveal fade intersection observer

ライブデモ Live Demo

Spacer Area

Reward 1

Fade in content as it enters viewport

Spacer Area

Reward 2

Smooth translation and opacity change

Spacer Area

Reward 3

Keep scrolling...

0.8s
40px

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Fade-in effect for elements as they scroll into the viewport.

スクロールして画面内に入った要素をフェードインさせるエフェクト。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

ランディングページ、コンテンツマーケティングサイト、ポートフォリオ、ブログ記事

特徴Key features

Elements fade in as they scroll into the viewport using IntersectionObserver. Configurable threshold and margin. Stagger support for sequential reveals. Pure CSS transitions with no animation library. Mutation-safe for dynamically added elements.

IntersectionObserverでスクロール時に要素がフェードイン。閾値とマージンを設定可能。順次リビールのスタッガーをサポート。アニメーションライブラリなしの純粋なCSSトランジション。動的追加要素にも対応。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--reveal-duration—Fade-in duration
--reveal-distance—Vertical travel distance

実装コード Implementation Code 

// react/M-012.jsx
import { useEffect, useRef } from 'react';
import './M-012.css';

export default function ScrollReveal({ children }) {
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        ref.current.classList.add('visible');
      }
    }, { threshold: 0.1 });
    
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return <div className="reveal-item" ref={ref}>{children}</div>;
}
.reveal-item {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 40px));
  transition: all var(--reveal-duration, 0.8s) cubic-bezier(0.5, 0, 0, 1);
}
.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}
import { useEffect, useRef } from 'react';
import './M-012.css';

export default function ScrollReveal({ children, className = '' }) {
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        ref.current.classList.add('visible');
      }
    }, { threshold: 0.1 });

    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return <div className={`reveal-item ${className}`} ref={ref}>{children}</div>;
}
/* M-012: React styles */
.reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Target elements start with opacity: 0 and transform: translateY(20px). An IntersectionObserver watches them, and when a sufficient fraction enters the viewport (controlled by threshold), it adds a visible class that transitions the element to opacity: 1 and translateY: 0. The observer disconnects after triggering to prevent re-animation.

ターゲット要素はopacity:0、transform:translateY(20px)で開始。IntersectionObserverが監視し、十分な割合がビューポートに入ると（thresholdで制御）visibleクラスを追加し、opacity:1・translateY:0へトランジション。トリガー後はオブザーバーを切断して再アニメーションを防止。

カスタマイズ方法Customization

Change translateY to translateX for a side-scroll reveal. Add data-delay attributes to individual elements to stagger them in a group. Combine with a clip-path animation for a wipe-reveal effect.

translateYをtranslateXに変えて横スクロールリビールに。data-delay属性を個別要素に追加してグループ内でスタッガー。clip-pathアニメーションと組み合わせてワイプリビールエフェクトに。

注意点Caveats

Set rootMargin to trigger the animation slightly before elements enter the viewport to prevent visible popping. Always provide a CSS-only fallback showing elements at final opacity for browsers without IntersectionObserver support.

rootMarginを設定して要素がビューポートに入る少し前にアニメーションをトリガーし、突然の表示を防いでください。IntersectionObserverをサポートしないブラウザ向けに、最終的なopacityで要素を表示するCSSオンリーのフォールバックを常に提供してください。

よくある質問 Frequently Asked Questions

How to customize the scroll reveal fade? Scroll Reveal Fadeをカスタマイズするには？

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 scroll reveal fade in React? ReactでScroll Reveal Fadeを使うには？

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 scroll reveal fade? Scroll Reveal Fadeのパフォーマンスへの影響は？

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.