淡入組件

您正在查詢的標題為:關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您正在查詢的標題為:基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源,或按此取消

scp-logo-zh.svg
繁中原創
scp-logo-en-400.png
主站翻譯

scp-logo-ru.svg
俄文分部
scp-logo-ko-400.png
韓文分部
scp-logo-cn-400.png
中國分部
scp-logo-fr-400.png
法文分部
scp-logo-pl.svg
波蘭分部
scp-logo-es.svg
西語分部
scp-logo-th.svg
泰文分部
scp-logo-dach-400.png
德文分部
scp-logo-it.svg
義語分部
scp-logo-ua.svg
烏克蘭分部
scp-logo-pt-400.png
葡語分部
scp-logo-cs.svg
捷克分部
scp-logo-vn-400.png
越南分部

您現在最好給我停下來

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

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


這是什麼

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

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

使用方法

於任何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包起來,然後你就能加以利用這個組件了。)

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


原始碼

@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(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
:root {
   --fade-in-delay: 0.5s;
}
:root {
  --fade-in-delay: 0.25s;
}
除非特別註明,本頁內容採用以下授權方式: Creative Commons Attribution-ShareAlike 3.0 License