Web Development Tips/TStory
Tstory - Smooth rendering
Jin-Co
2023. 3. 4. 13:59
반응형
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
반응형