반응형
페이지를 이동하면서 요소들이 화면에 표시될 때 요소나 파일이 로딩되는 속도 차이 등의 이유로 아래와 같이 부자연스럽게 표시됩니다. 간단한 작업을 통해 화면을 자연스럽게 로딩하는 효과를 구현해 보겠습니다.
해당 코드는 티스토리의 모든 스킨에 적용가능할 뿐 아니라 거의 모든 웹 사이트에 적용가능합니다.
완성코드
/* Type Selector Reset */
body {
/* other styles */
animation: smoothRendering 1s ease forwards;
}
@keyframes smoothRendering {
from {opacity: 0;}
to {opacity: 1;}
}구현하기
공통 스타일 추가
관리자 페이지에 보면 좌측에 '스킨편집'이라는 기능이 있는데요. 해당 메뉴를 선택하면 스키편집 페이지로 이동합니다.
열린 화면에서 'html 편집'이라는 버튼을 누르고
'CSS'를 선택하고 <body>에 아래 코드를 추가하고
body {
animation: smoothRendering 1s ease forwards;
}아래와 같이 애니메이션 효과를 추가합니다.
@keyframes smoothRendering {
from {opacity: 0;}
to {opacity: 1;}
}
코드 삽입 후 저장하면 아래와 같이 자연스럽게 화면이 로딩됩니다.
이상으로 자연스럽게 화면을 로딩하는 방법을 보았습니다.
728x90
반응형
'웹 개발 알아두기 > 티스토리' 카테고리의 다른 글
| 티스토리 다국어 블로그만들기 (Book Club 스킨) (5) | 2023.04.29 |
|---|---|
| 코드 클립보드에 복사하기 (3) | 2023.03.18 |
| 티스토리 다국어 블로그만들기 (Poster 스킨) (8) | 2023.02.22 |
| 티스토리 - 스타일링 (4) | 2023.01.19 |
| 티스토리 목차 링크 만들기 (0) | 2023.01.16 |
