スクロールアニメーションの解説

このページでは、最新のCSS機能であるScroll-driven Animationsを使用しています。 この機能により、スクロールに応じてコンテンツがフェードインおよびフェードアウトする効果を実現しています。

主要なCSS:

            .fade-content {
                width: 80%;
                opacity: 0;
                transform: translateY(20px);
                animation: fadeInOut 1s ease-out both;
                animation-timeline: view();
                animation-range: entry 30% cover 80%;
            }
            
            @keyframes fadeInOut {
                0%, 100% {
                    opacity: 0;
                    transform: translateY(20px);
                }
                25%, 75% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
                

• animation-timeline: view(); - ビューポートを基準にアニメーションを制御します。
• animation-range: entry 30% cover 80%; - 要素が30%表示されたときにアニメーションを開始し、80%表示されたときに終了します。
• @keyframes fadeInOut - フェードインとフェードアウトの動きを定義しています。

注意: この機能は新しいため、一部のブラウザでは対応していない可能性があります。 Chrome最新版での動作を確認しています。