반응형
When moving to another page or first loading a page, the page seems to pop up suddenly not smoothly link shown in the picture below. So I will show you how to render pages with minimum code that can be used on almost every website.
In this example, I will implement the feature on the tstory(Korean blog platform).
Completed Code
If you want to know the code first here they are.
/* Type Selector Reset */
body {
/* other styles */
animation: smoothRendering 1s ease forwards;
}
@keyframes smoothRendering {
from {opacity: 0;}
to {opacity: 1;}
}Implementation
Add Styles to The Common Skin.
In the admin page, go to 'Edit skin' and select.
Click 'Edit html'
Then select 'CSS' and add the code below in the <body> tag.
body {
animation: smoothRendering 1s ease forwards;
}Add the animation style below (or anywhere after the body tag).
@keyframes smoothRendering {
from {opacity: 0;}
to {opacity: 1;}
}
Then click 'save' on the top right.
That is it! I hope you like this smoothing feature.
728x90
반응형
'Web Development Tips > TStory' 카테고리의 다른 글
| tstory - Multi-Lingual Blog (Book Club Skin) (4) | 2023.04.29 |
|---|---|
| tstory - How to Add A Clipboard Function (8) | 2023.03.18 |
| tstory - Multi-Lingual Blog (Poster Skin) (0) | 2023.03.08 |
| tstory - How to Use the Format (2) | 2023.03.08 |
