146 lines
5.4 KiB
HTML
146 lines
5.4 KiB
HTML
<div id="Gallery"></div>
|
|
|
|
<script>
|
|
// 图片数据
|
|
show_images = [
|
|
{
|
|
"title": "<span class='text-[#ec1c24]'>凌驾</span>",
|
|
"css": "",
|
|
"content1": "颤抖吧",
|
|
"content2": "你的命运已在我手中",
|
|
"content3": "束手就擒",
|
|
"url": "/assets/gallery/1.png"
|
|
},
|
|
// 可以添加更多图片数据
|
|
{
|
|
"title": "<span class='text-[#00ff00]'>觉醒</span>",
|
|
"css": "",
|
|
"content1": "力量正在涌现",
|
|
"content2": "突破极限",
|
|
"content3": "全新的自我",
|
|
"url": "/assets/gallery/2.png"
|
|
}
|
|
];
|
|
|
|
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 = () => {
|
|
// 获取当前激活的页面ID（从URL哈希中）
|
|
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>
|