fes-ryuukatetu-fade-in

これは何？

ページのロード時、全ての文章を一度に表示させずに滑らかにフェードインさせるコンポーネントです。

又、ページ上の全ての文章を一度にフェードインさせず各々の文章¹を表示させるタイミングをずらすことも可能です。

使用方法

ページ内の任意の場所に以下の記述を追加してください²。

[[include :scp-jp:component:fade-in speed=1]]

speed=1: 全ての記述が同時に表示されます。
speed=2: 0.5秒間隔で全ての記述が表示されます。
speed=3: 0.25秒間隔で全ての記述が表示されます。

注意事項

効果は#page-contentの直下である要素にのみ適用されます。ネストされた要素(例:blockquoteやdivの中のもの)や、ページの他の部分（例:サイドバー）には適用されません。

(ページ内に他のアニメーション要素(例:ACSアニメーション)があり、それらと衝突する場合は問題のあるアニメーション要素をdivで囲むことでこれを利用できます)

尚、効果はページ上の最初の15個の要素にのみ適用されそれ以降は全ての文章が同時に表示されます。これは読者がページを開いたときにスムーズな読み込みを体験するのに十分ですあり、また読者がページを開いて直ぐに下部にスクロールしたい場合でも文章の表示までそれほど長く待機する必要はありません。

---

Source code

@media screen and (prefers-reduced-motion: no-preference) {
  #page-title, #breadcrumbs, #page-content > * {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
  }
}
 
#page-title, #breadcrumbs { animation-delay: 0s; }
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}
 
:root {
  --fade-in-delay: 0s;
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }

:root {
   --fade-in-delay: 0.5s;
}

:root {
  --fade-in-delay: 0.25s;
}

Footnotes

1. 訳注: 改行から改行までを一区切りと定義しています。

2. 訳注: 変数"speed"の変更により以下の効果が得られます。