페이드인

잠깐 정지!!

SCP 위키 내부에서 사용되는 템플릿 페이지입니다.

스탭의 허가없이
이 페이지를 만지지 마세요

---

설명

페이지의 모든 것이 페이지가 로딩되고 순식간에 튀어나오는 게 아니라 천천히 페이드인되게 만들어주는 구성요소입니다.

페이드는 시차를 둘 수 있고, 페이지의 각각이 한 번에 나타나는게 아니라, 하나하나씩 나타나게 할 수도 있습니다.

사용법

어떤 위키든:

[[include :scpko:component:fade-in speed=1]]

speed=1: 모든 게 동시에 나타납니다
speed=2: 모든 것이 이전 것이 나타나고 0.5초 뒤에 나타납니다
speed=3: 모든 것이 이전 것이 나타나고 0.25초 뒤에 나타납니다

주의사항

페이드인 효과는 #page-content의 직속 자식인 요소에만 적용됩니다. 안에 들어가 있는 요소나 (예시: 인용구 구문이나 div 구문 안에 있을 때) 페이지의 다른 부분에 있을 때 (예시: 사이드바)는 적용되지 않습니다.

(여러분은 이런 점을 여러분의 페이지에 충돌할 여지가 있는 여타 애니메이션 (예시: ACS 애니메이션) 등이 있을 때 문제의 애니메이션 요소를 div로 감싸는 것으로 해결하는데 이용하시면 됩니다.)

또한 이 구성요소는 페이지의 첫 35개의 요소에만 적용되면, 그 이후의 모든 건 동시에 나타납니다. 그 정도면 독자들이 페이지를 열었을 때 깔끔한 로딩을 경험하기에 충분하지만 아래까지 스크롤을 내리려고 할 때 엄청나게 오래 기다릴 필요가 없습니다.

---

소스코드

#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;
}