RSO 組件

您現在最好給我停下來

本頁面內包含基金會維基內部使用的模板

嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面


這是什麼

這是個能讓頁面中的所有事物平滑淡入,而非在頁面載入時就立即顯現出來的組件,

淡入的時間點也可以交錯開來,也就是頁面內的每個要素一個接著一個出現,而不是全部同時。

使用方法

於任何wiki頁面中加入以下代碼:

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

speed=1:所有事物同時出現
speed=2:每間格0.5秒才顯現出下一樣事物
speed=3:每間格0.25秒才顯現出下一樣事物

使用限制

淡入的效果僅適用於#page-content的直接子元素。它無法應用在巢狀元素(如位於引用塊或div裡面的內容)或頁面中的其它部分(像是側邊欄)之上。

(如果這與你頁面中的其它動畫相互衝突(像是,ACS 動畫),你可以簡單地把出問題的動畫元素用div包起來,然後你就能加以利用這個組件了。)

同時,它也僅會應用於你頁面中的前35個元素上面,而在那之後的元素就只會於同一時間顯現出來。這已經足夠讓讀者在打開頁面時,獲得一個平滑地載入體驗了,但若他們想要直接拉到底部去看,那他們就只能坐在那邊等上很長一段時間了。


原始碼

@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 { 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(16) { animation-delay: calc(16 * var(--fade-in-delay)); }
#page-content > :nth-child(17) { animation-delay: calc(17 * var(--fade-in-delay)); }
#page-content > :nth-child(18) { animation-delay: calc(18 * var(--fade-in-delay)); }
#page-content > :nth-child(19) { animation-delay: calc(19 * var(--fade-in-delay)); }
#page-content > :nth-child(20) { animation-delay: calc(20 * var(--fade-in-delay)); }
#page-content > :nth-child(21) { animation-delay: calc(21 * var(--fade-in-delay)); }
#page-content > :nth-child(22) { animation-delay: calc(22 * var(--fade-in-delay)); }
#page-content > :nth-child(23) { animation-delay: calc(23 * var(--fade-in-delay)); }
#page-content > :nth-child(24) { animation-delay: calc(24 * var(--fade-in-delay)); }
#page-content > :nth-child(25) { animation-delay: calc(25 * var(--fade-in-delay)); }
#page-content > :nth-child(26) { animation-delay: calc(26 * var(--fade-in-delay)); }
#page-content > :nth-child(27) { animation-delay: calc(27 * var(--fade-in-delay)); }
#page-content > :nth-child(28) { animation-delay: calc(28 * var(--fade-in-delay)); }
#page-content > :nth-child(29) { animation-delay: calc(29 * var(--fade-in-delay)); }
#page-content > :nth-child(30) { animation-delay: calc(30 * var(--fade-in-delay)); }
#page-content > :nth-child(31) { animation-delay: calc(31 * var(--fade-in-delay)); }
#page-content > :nth-child(32) { animation-delay: calc(32 * var(--fade-in-delay)); }
#page-content > :nth-child(33) { animation-delay: calc(33 * var(--fade-in-delay)); }
#page-content > :nth-child(34) { animation-delay: calc(34 * var(--fade-in-delay)); }
#page-content > :nth-child(35) { animation-delay: calc(35 * var(--fade-in-delay)); }
#page-content > :nth-child(n+35) { animation-delay: calc(36 * var(--fade-in-delay)); }
:root {
   --fade-in-delay: 0.5s;
}
:root {
  --fade-in-delay: 0.25s;
}
評分: +1+x
一眼便知。
為那些真的想要用暗色側邊欄黑標老教父版式於其文章的人而設計:
只需添加以下引用程式碼:[[include :scp-zh-tr:component:bhl-dark-sidebar]]

評分: +1+x

在任何頁面上加入以下代碼:

[[include :scp-zh-tr:component:rso]]

這個組件被我用來輕鬆地修改我所有文章的格式。我會隨時根據我的喜好和我想要我的文章看起來長怎樣,來不斷地更新這個組件。如果這孩子讓你的頁面爆炸了話,這可不是我的責任。

除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License