55 lines
3.4 KiB
HTML
55 lines
3.4 KiB
HTML
<div id="Gallery"></div>
|
|
<script>
|
|
show_images = [
|
|
{
|
|
"title": "新年好",
|
|
"css": "",
|
|
"content1": "2026 新年好",
|
|
"content2": "",
|
|
"content3": "",
|
|
"url": "/Members/ChiSha/assets/img/F.jpg"
|
|
},
|
|
{
|
|
"title": "合影",
|
|
"css": "",
|
|
"content1": "小情侣",
|
|
"content2": "",
|
|
"content3": "",
|
|
"url": "/Members/B-Smooth/assets/img/1.jpg"
|
|
}
|
|
];
|
|
const Gallery = document.getElementById("Gallery");
|
|
show_images.forEach((item, i) => {
|
|
const nextLink = i !== show_images.length - 1 ? `#p${i+1}` : "#footer";
|
|
const nextText = i !== show_images.length - 1 ? "继续" : "完";
|
|
Gallery.innerHTML += `<div id="p${i}"class="page-header counter-area header-filter min-h-screen flex items-center justify-center relative overflow-hidden"style="background-image: url('${item.url}'); background-size: cover; background-position: center; background-repeat: no-repeat;"><!--半透明叠加层增强文字可读性--><div class="absolute inset-0 bg-black/40 z-0"></div><div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10"><div class="content-center brand text-center opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="${item.css}"><h1 class="h1-seo text-5xl md:text-7xl font-extrabold text-white mb-6 opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="transition-delay: 300ms">${item.title}</h1><h3 class="text-2xl md:text-3xl text-white mb-4 opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="transition-delay: 600ms">${item.content1}</h3><h4 class="description text-xl md:text-2xl text-gray-100 mb-6 opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="transition-delay: 900ms">${item.content2}</h4><h3 class="text-2xl md:text-3xl text-white mb-8 opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="transition-delay: 1200ms">${item.content3}</h3><div class="row justify-center"><div class="col-lg-8 col-md-12"><div class="btn-wrapper flex justify-center"><a href="${nextLink}"class="btn-primary btn-round ashow bg-white text-gray-900 hover:bg-gray-100 font-medium px-6 py-3 rounded-full transition-all duration-300 shadow-lg opacity-0 transform translate-y-8 transition-all duration-1000 ease-out"style="transition-delay: 1500ms">${nextText}</a></div></div></div></div></div></div>`
|
|
});
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const showCurrentPageElements = () => {
|
|
const currentHash = window.location.hash || '#p0';
|
|
const currentPage = document.querySelector(currentHash);
|
|
if (currentPage) {
|
|
const elements = currentPage.querySelectorAll('.content-center, .h1-seo, h3, h4, .btn-primary');
|
|
elements.forEach(el => {
|
|
el.classList.remove('opacity-0', 'translate-y-8')
|
|
})
|
|
}
|
|
};
|
|
showCurrentPageElements();
|
|
window.addEventListener('hashchange', showCurrentPageElements)
|
|
});
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {content-visibility: auto;}
|
|
.btn-round {@apply rounded-full;}
|
|
.header-filter {@apply relative;}
|
|
.counter-area {@apply flex items-center;}
|
|
}
|
|
</style>
|
|
<style>
|
|
#navbar {background-color: transparent !important;}
|
|
html {scroll-behavior: smooth;}
|
|
body {padding-top: 0;margin: 0;}
|
|
</style> |