編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
これは何?
ページのロード時、全ての文章を一度に表示させずに滑らかにフェードインさせるコンポーネントです。
又、ページ上の全ての文章を一度にフェードインさせず各々の文章を表示させるタイミングをずらすことも可能です。
使用方法
ページ内の任意の場所に以下の記述を追加してください。
[[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個の要素にのみ適用され、それ以降は全ての文章が同時に表示されます。これは読者がページを開いたときにスムーズな読み込みを体験するのに十分であり、また読者がページを開いて直ぐに下部にスクロールしたい場合でも文章の表示までそれほど長く待機する必要はありません。
ソースコード
@mediascreenand (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{animation-delay:0s; }@keyframesfadeIn{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; }
クレジット
タイトル: RSO コンポーネント
原題: RSO Component
著作権者: Rounderhouse Rounderhouse
翻訳責任者: takion00 takion00
作成年: 2020
翻訳年: 2025
初訳時参照リビジョン: rev.31
ソース RSO Component
どんなウィキでも On any wiki:
[[include :scp-jp:component:rso]]
[[include :scp-wiki:component:rso]]
このコンポーネントは簡単に記事のフォーマットを変更することができます。私の好みや記事の見た目に合わせて、常に更新しています。もしあなたがこれを使用してページが壊れてしまったとしても、私は一切の責任を負いかねます。 This is a component I use to easily change the formatting on all my articles. I update it all the time according to my tastes and what I want my articles to look like. If you use it and it breaks your page, I am not responsible.