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

14
src/layouts/Layout.astro
View File

@ -139,8 +139,8 @@ const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'cente
<ConfigCarrier></ConfigCarrier> <ConfigCarrier></ConfigCarrier>
<GlobalStyles> <GlobalStyles>
{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden"> {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} src={siteConfig.banner.src} position={siteConfig.banner.position}
> >
</ImageWrapper> </ImageWrapper>
</div>} </div>}
@ -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() { function init() {
// disableAnimation()() // TODO // disableAnimation()() // TODO
loadTheme(); loadTheme();
loadHue(); loadHue();
initCustomScrollbar(); initCustomScrollbar();
showBanner();
} }
/* Load settings when entering the site */ /* Load settings when entering the site */