705 lines
30 KiB
HTML
705 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>张设计 - 文旅产业设计专家</title>
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Font Awesome图标 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
<!-- 文旅主题样式 -->
|
||
<link rel="stylesheet" href="travel-culture-style.css">
|
||
|
||
<style>
|
||
/* 内联关键样式 */
|
||
.hero-section {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
z-index: 10;
|
||
padding: 40px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border-radius: 20px;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.chinese-title {
|
||
font-size: 3rem;
|
||
font-weight: bold;
|
||
background: linear-gradient(135deg, #2d5016, #4a90a4);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 20px;
|
||
font-family: 'STKaiti', 'KaiTi', serif;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.5rem;
|
||
color: #e67e22;
|
||
margin-bottom: 30px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.description {
|
||
font-size: 1.1rem;
|
||
color: #5a6c7d;
|
||
line-height: 1.8;
|
||
max-width: 600px;
|
||
margin: 0 auto 30px;
|
||
}
|
||
|
||
/* 项目展示网格 */
|
||
.projects-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 30px;
|
||
padding: 50px 0;
|
||
}
|
||
|
||
/* 技能标签 */
|
||
.skill-tag {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
margin: 5px;
|
||
background: linear-gradient(135deg, #4a7c59, #2d5016);
|
||
color: white;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.skill-tag:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(74, 124, 89, 0.3);
|
||
}
|
||
|
||
/* 联系方式卡片 */
|
||
.contact-card {
|
||
background: white;
|
||
padding: 30px;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contact-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(74, 144, 164, 0.2), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.contact-card:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.contact-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 节标题装饰 */
|
||
.section-title {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
position: relative;
|
||
color: #2d5016;
|
||
}
|
||
|
||
.section-title::before,
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 100px;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, #c0392b, transparent);
|
||
}
|
||
|
||
.section-title::before {
|
||
left: -120px;
|
||
}
|
||
|
||
.section-title::after {
|
||
right: -120px;
|
||
}
|
||
|
||
/* 加载遮罩 */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #2d5016, #4a90a4);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10000;
|
||
transition: opacity 1s ease;
|
||
}
|
||
|
||
.loading-text {
|
||
color: white;
|
||
font-size: 24px;
|
||
font-family: 'STKaiti', serif;
|
||
animation: fadeInOut 2s infinite;
|
||
}
|
||
|
||
@keyframes fadeInOut {
|
||
0%, 100% { opacity: 0.3; }
|
||
50% { opacity: 1; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 加载动画 -->
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="loading-text">山水之间，文旅无限...</div>
|
||
</div>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top nav-menu">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#home">
|
||
<i class="fas fa-mountain"></i> 文旅设计师
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#home">
|
||
<i class="fas fa-home"></i> 首页
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#about">
|
||
<i class="fas fa-user"></i> 关于我
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#journey">
|
||
<i class="fas fa-route"></i> 职业旅程
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#projects">
|
||
<i class="fas fa-map-marked-alt"></i> 项目地图
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#skills">
|
||
<i class="fas fa-compass"></i> 技能指南
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#contact">
|
||
<i class="fas fa-paper-plane"></i> 联系方式
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主页英雄区 -->
|
||
<section id="home" class="hero-section">
|
||
<div class="hero-content scroll-reveal animate-on-load">
|
||
<div class="scroll-content">
|
||
<h1 class="chinese-title title-decoration">
|
||
<span>游山水之间</span>
|
||
</h1>
|
||
<h2 class="subtitle">文旅产业设计专家</h2>
|
||
<p class="description">
|
||
十年深耕文旅产业，专注于景区规划、文化体验设计与智慧旅游解决方案。
|
||
将传统文化与现代科技完美融合，打造独特的文旅体验。
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="#projects" class="btn btn-travel me-3">
|
||
<i class="fas fa-binoculars"></i> 探索项目
|
||
</a>
|
||
<a href="#contact" class="btn btn-outline-dark">
|
||
<i class="fas fa-handshake"></i> 合作咨询
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于我 -->
|
||
<section id="about" class="py-5 content-section">
|
||
<div class="container">
|
||
<h2 class="section-title">关于我</h2>
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6 scroll-reveal">
|
||
<div class="scroll-content pattern-border">
|
||
<h3 class="mb-3">张设计</h3>
|
||
<p class="lead">资深文旅产业设计师</p>
|
||
<p>拥有10年文旅产业设计经验，曾主导多个国家级景区的规划与设计项目。擅长将地方文化特色与现代旅游需求相结合，创造独特的旅游体验。</p>
|
||
<ul class="list-unstyled">
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>国家一级注册规划师</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>中国旅游协会理事</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>文化和旅游部专家库成员</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>多个5A级景区设计顾问</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ink-transition p-4">
|
||
<img src="https://via.placeholder.com/500x400/4a7c59/ffffff?text=设计师照片"
|
||
alt="设计师" class="img-fluid rounded shadow">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 职业旅程时间轴 -->
|
||
<section id="journey" class="py-5 bg-light">
|
||
<div class="container">
|
||
<h2 class="section-title">职业旅程</h2>
|
||
<div class="journey-timeline">
|
||
<div class="journey-path"></div>
|
||
|
||
<div class="journey-stop fade-in">
|
||
<div class="stop-marker"></div>
|
||
<div class="stop-content">
|
||
<h4>2014 - 起航</h4>
|
||
<p>加入某知名旅游规划设计院，参与首个古镇保护与开发项目</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="journey-stop fade-in">
|
||
<div class="stop-marker"></div>
|
||
<div class="stop-content">
|
||
<h4>2016 - 成长</h4>
|
||
<p>主导完成3个省级文旅融合示范项目，获得业界认可</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="journey-stop fade-in">
|
||
<div class="stop-marker"></div>
|
||
<div class="stop-content">
|
||
<h4>2018 - 突破</h4>
|
||
<p>创立个人工作室，专注于智慧景区与文化体验设计</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="journey-stop fade-in">
|
||
<div class="stop-marker"></div>
|
||
<div class="stop-content">
|
||
<h4>2020 - 创新</h4>
|
||
<p>推出"数字文旅"解决方案，助力景区数字化转型</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="journey-stop fade-in">
|
||
<div class="stop-marker"></div>
|
||
<div class="stop-content">
|
||
<h4>2024 - 现在</h4>
|
||
<p>深耕文旅产业，打造多个标杆项目，持续创新发展</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目地图 -->
|
||
<section id="projects" class="py-5">
|
||
<div class="container">
|
||
<h2 class="section-title">项目地图</h2>
|
||
|
||
<!-- 地图导航 -->
|
||
<div class="map-navigation mb-5"></div>
|
||
|
||
<!-- 项目展示网格 -->
|
||
<div class="projects-grid">
|
||
<!-- 项目1 -->
|
||
<div class="travel-project-card" data-project-id="1" id="project-1">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/2d5016/ffffff?text=智慧景区"
|
||
alt="智慧景区" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">智慧旅游</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>黄山智慧景区管理系统</h4>
|
||
<p class="text-muted">整合物联网、大数据、AI技术，打造全方位智慧景区管理平台，实现游客流量预测、智能导览、应急响应等功能。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2023年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目2 -->
|
||
<div class="travel-project-card" data-project-id="2" id="project-2">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/4a90a4/ffffff?text=文化遗产"
|
||
alt="文化遗产" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">文化保护</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>敦煌文化遗产数字化工程</h4>
|
||
<p class="text-muted">运用3D扫描、VR/AR技术，将敦煌壁画进行数字化保存与展示，让千年文化瑰宝得以永续传承。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2023年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目3 -->
|
||
<div class="travel-project-card" data-project-id="3" id="project-3">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/e67e22/ffffff?text=旅游规划"
|
||
alt="旅游规划" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">线路设计</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>丝绸之路主题旅游线路</h4>
|
||
<p class="text-muted">设计串联西安、兰州、敦煌等城市的主题旅游线路，融合历史文化、自然风光、民俗体验等元素。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2022年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目4 -->
|
||
<div class="travel-project-card" data-project-id="4" id="project-4">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/c0392b/ffffff?text=民宿设计"
|
||
alt="民宿设计" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">住宿体验</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>莫干山精品民宿集群</h4>
|
||
<p class="text-muted">打造融合当地竹文化、茶文化的精品民宿群，提供独特的山居体验，年接待游客超10万人次。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2022年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目5 -->
|
||
<div class="travel-project-card" data-project-id="5">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/00a86b/ffffff?text=生态旅游"
|
||
alt="生态旅游" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">生态保护</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>西双版纳生态旅游区</h4>
|
||
<p class="text-muted">设计生态友好型旅游项目，平衡旅游开发与环境保护，实现可持续发展目标。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2021年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目6 -->
|
||
<div class="travel-project-card" data-project-id="6">
|
||
<div class="project-image-container">
|
||
<img src="https://via.placeholder.com/400x250/95a99c/ffffff?text=文创产品"
|
||
alt="文创产品" class="project-image">
|
||
<div class="project-overlay">
|
||
<span class="project-category">文创开发</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<h4>故宫文创产品系列</h4>
|
||
<p class="text-muted">设计开发故宫主题文创产品，将传统文化元素与现代设计理念结合，年销售额突破千万。</p>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">2021年完成</small>
|
||
<a href="#" class="btn btn-sm btn-travel">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技能指南 -->
|
||
<section id="skills" class="py-5 bg-light">
|
||
<div class="container">
|
||
<h2 class="section-title">技能指南</h2>
|
||
|
||
<div class="row">
|
||
<!-- 规划设计 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-drafting-compass fa-3x mb-3" style="color: #2d5016;"></i>
|
||
<h4>规划设计</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">景区规划</span>
|
||
<span class="skill-tag">线路设计</span>
|
||
<span class="skill-tag">空间布局</span>
|
||
<span class="skill-tag">功能分区</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文化挖掘 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-monument fa-3x mb-3" style="color: #c0392b;"></i>
|
||
<h4>文化挖掘</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">文化研究</span>
|
||
<span class="skill-tag">故事提炼</span>
|
||
<span class="skill-tag">IP打造</span>
|
||
<span class="skill-tag">主题策划</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数字技术 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-microchip fa-3x mb-3" style="color: #4a90a4;"></i>
|
||
<h4>数字技术</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">VR/AR体验</span>
|
||
<span class="skill-tag">智慧导览</span>
|
||
<span class="skill-tag">大数据分析</span>
|
||
<span class="skill-tag">物联网应用</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 体验设计 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-theater-masks fa-3x mb-3" style="color: #e67e22;"></i>
|
||
<h4>体验设计</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">互动体验</span>
|
||
<span class="skill-tag">沉浸式场景</span>
|
||
<span class="skill-tag">情境营造</span>
|
||
<span class="skill-tag">游客参与</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 运营管理 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-chart-line fa-3x mb-3" style="color: #00a86b;"></i>
|
||
<h4>运营管理</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">营销策划</span>
|
||
<span class="skill-tag">品牌建设</span>
|
||
<span class="skill-tag">服务优化</span>
|
||
<span class="skill-tag">收益管理</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 可持续发展 -->
|
||
<div class="col-md-4 mb-4">
|
||
<div class="contact-card text-center">
|
||
<i class="fas fa-leaf fa-3x mb-3" style="color: #4a7c59;"></i>
|
||
<h4>可持续发展</h4>
|
||
<div class="mt-3">
|
||
<span class="skill-tag">生态保护</span>
|
||
<span class="skill-tag">社区参与</span>
|
||
<span class="skill-tag">文化传承</span>
|
||
<span class="skill-tag">绿色旅游</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="contact" class="py-5">
|
||
<div class="container">
|
||
<h2 class="section-title">联系方式</h2>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="pattern-border">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<div class="d-flex align-items-center">
|
||
<i class="fas fa-phone fa-2x me-3" style="color: #2d5016;"></i>
|
||
<div>
|
||
<h5>电话</h5>
|
||
<p class="mb-0">+86 138 0000 0000</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="d-flex align-items-center">
|
||
<i class="fas fa-envelope fa-2x me-3" style="color: #c0392b;"></i>
|
||
<div>
|
||
<h5>邮箱</h5>
|
||
<p class="mb-0">design@travel-culture.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="d-flex align-items-center">
|
||
<i class="fas fa-map-marker-alt fa-2x me-3" style="color: #4a90a4;"></i>
|
||
<div>
|
||
<h5>地址</h5>
|
||
<p class="mb-0">北京市朝阳区文旅创意园</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6 mb-3">
|
||
<div class="d-flex align-items-center">
|
||
<i class="fas fa-globe fa-2x me-3" style="color: #e67e22;"></i>
|
||
<div>
|
||
<h5>网站</h5>
|
||
<p class="mb-0">www.travel-culture-design.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="text-center">
|
||
<h5 class="mb-3">关注我们</h5>
|
||
<div class="social-links">
|
||
<a href="#" class="btn btn-outline-dark btn-sm mx-1">
|
||
<i class="fab fa-weixin"></i> 微信
|
||
</a>
|
||
<a href="#" class="btn btn-outline-dark btn-sm mx-1">
|
||
<i class="fab fa-weibo"></i> 微博
|
||
</a>
|
||
<a href="#" class="btn btn-outline-dark btn-sm mx-1">
|
||
<i class="fab fa-linkedin"></i> LinkedIn
|
||
</a>
|
||
<a href="#" class="btn btn-outline-dark btn-sm mx-1">
|
||
<i class="fab fa-github"></i> GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="py-4 text-center" style="background: linear-gradient(135deg, #2d5016, #4a90a4); color: white;">
|
||
<div class="container">
|
||
<p class="mb-0">© 2024 张设计 - 文旅产业设计专家 | 让旅行成为文化体验</p>
|
||
<p class="small mt-2">用设计连接文化与旅游，创造美好体验</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<!-- GSAP动画库 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<!-- 自定义动画脚本 -->
|
||
<script src="travel-animations.js"></script>
|
||
|
||
<script>
|
||
// 页面加载完成后的处理
|
||
window.addEventListener('load', function() {
|
||
setTimeout(() => {
|
||
const loader = document.getElementById('loadingOverlay');
|
||
loader.style.opacity = '0';
|
||
setTimeout(() => {
|
||
loader.style.display = 'none';
|
||
}, 1000);
|
||
}, 1500);
|
||
});
|
||
|
||
// GSAP动画增强
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
// 滚动触发动画
|
||
gsap.utils.toArray('.fade-in').forEach(element => {
|
||
gsap.fromTo(element,
|
||
{ opacity: 0, y: 50 },
|
||
{
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: 1,
|
||
scrollTrigger: {
|
||
trigger: element,
|
||
start: 'top 80%',
|
||
end: 'bottom 20%',
|
||
toggleActions: 'play none none reverse'
|
||
}
|
||
}
|
||
);
|
||
});
|
||
|
||
// 项目卡片动画
|
||
gsap.utils.toArray('.travel-project-card').forEach((card, index) => {
|
||
gsap.fromTo(card,
|
||
{ opacity: 0, scale: 0.8 },
|
||
{
|
||
opacity: 1,
|
||
scale: 1,
|
||
duration: 0.6,
|
||
delay: index * 0.1,
|
||
scrollTrigger: {
|
||
trigger: card,
|
||
start: 'top 85%'
|
||
}
|
||
}
|
||
);
|
||
});
|
||
|
||
// 技能标签动画
|
||
gsap.utils.toArray('.skill-tag').forEach((tag, index) => {
|
||
gsap.fromTo(tag,
|
||
{ opacity: 0, x: -20 },
|
||
{
|
||
opacity: 1,
|
||
x: 0,
|
||
duration: 0.4,
|
||
delay: index * 0.05,
|
||
scrollTrigger: {
|
||
trigger: tag.closest('.contact-card'),
|
||
start: 'top 80%'
|
||
}
|
||
}
|
||
);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |