Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add onload animation for banner

This commit is contained in:
saicaca 2024-09-20 01:08:02 +08:00
parent 8565724eb3
commit 085fd62a79
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/layouts/Layout.astro
View File

@ -139,7 +139,7 @@ const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'cente
<ConfigCarrier></ConfigCarrier>
<GlobalStyles>
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden">
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700"]}
<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
src={siteConfig.banner.src} position={siteConfig.banner.position}
>
</ImageWrapper>
@ -305,11 +305,21 @@ function initCustomScrollbar() {
});
}
function showBanner() {
const banner = document.getElementById('banner')
if (!banner) {
console.error('Failed to find the banner element')
return
}
banner.classList.remove('opacity-0', 'scale-105')
}
function init() {
// disableAnimation()() // TODO
loadTheme();
loadHue();
initCustomScrollbar();
showBanner();
}
/* Load settings when entering the site */