-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
293 lines (271 loc) · 10.4 KB
/
test.html
File metadata and controls
293 lines (271 loc) · 10.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic GSAP Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<!-- <div style="height: 1000px;"></div>
<div id="square" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
// Initialize ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Create animation using GSAP
var tween = gsap.to("#square", {x: 500, duration: 1});
// Create ScrollMagic Scene
var scene = new ScrollMagic.Scene({
triggerElement: "#square",
duration: 500
})
.setTween(tween)
.addIndicators() // Add indicators (requires plugin)
.addTo(controller);
</script>
<div style="height: 1000px;"></div> -->
<section id="assistance" class="flex flex-col items-center justify-center">
<div style="height: 50vh;"></div>
<div class="data-section" style="width: 80vw; z-index: 1;">
<!-- 小麦种植面积对比 -->
<div class="comparison-block opacity-0">
<div class="text-[#ffe300] text-[65px] tracking-[14.30px] mb-20">
首先用来制作辣条的面粉多为来自小麦主产区河南，<br>本地面粉产出量很低，价格偏高。
</div>
<div class="flex justify-between items-center mb-10">
<div class="text-white text-[61px]">
<span>湖南省-</span><span class="text-[88px]">118.60</span><span>千公顷</span>
</div>
<div class="text-white text-[61px]">
<span>河南省-</span><span class="text-[88px]">4922.33</span><span>千公顷</span>
</div>
</div>
<!-- 添加箭头图标 -->
<div style="display: flex; justify-content: space-between; margin: 20px 0;">
<img src="img/s3_arrow_down.svg" alt="向下箭头" style="width: 101px; height: 84px;">
<img src="img/s3_arrow_down.svg" alt="向下箭头" style="width: 101px; height: 84px; transform: rotate(180deg);">
</div>
<div class="text-black text-[106px] text-center bg-white bg-opacity-80 py-10">
小麦种植面积=<span class="text-[147px]">1:41.5</span>
</div>
</div>
<div style="height: 50vh;"></div>
<!-- 小麦产量对比 -->
<div class="production-block opacity-0">
<div class="flex justify-between items-center mb-10">
<div class="text-white text-[61px]">
<span>湖南省-</span><span class="text-[88px]">23.30万吨</span>
</div>
<div class="text-white text-[61px]">
<span>河南省-</span><span class="text-[88px]">2235.95万吨</span>
</div>
</div>
<!-- 添加箭头图标 -->
<div style="display: flex; justify-content: space-between; margin: 20px 0;">
<img src="img/s3_arrow_down.svg" alt="向下箭头" style="width: 101px; height: 84px;">
<img src="img/s3_arrow_down.svg" alt="向下箭头" style="width: 101px; height: 84px; transform: rotate(180deg);">
</div>
<div class="text-black text-[106px] text-center bg-white bg-opacity-80 py-10">
小麦产量=<span class="text-[147px]">1:95.96</span>
</div>
</div>
<div style="height: 50vh;"></div>
<!-- 地理条件说明 -->
<div class="geography-block opacity-0">
<div class="text-[#ffe300] text-[65px] tracking-[14.30px] mb-20">
此外平江县的地貌以山地和丘陵为主，<br>
有21座海拔1000米以上的高山，东西相对高度差接近1500米，<br>
交通闭塞和高昂的运费成本让辣条生产企业难以承受。
</div>
<!-- 添加地形图片 -->
<div class="flex justify-between items-center">
<img src="img/s3_terrain_left.png" alt="地形图左" style="width: 986px; height: 873px;">
<img src="img/s3_terrain_right.png" alt="地形图右" style="width: 926px; height: 121px;">
</div>
<div class="text-black text-[120px] font-normal tracking-[12px] text-center bg-white bg-opacity-80 py-5"
style="margin-top: -100px; position: relative; z-index: 2;">
东西相对差达1500米
</div>
</div>
<div style="height: 50vh;"></div>
<!-- 运输问题图片 -->
<div class="transport-block opacity-0">
<div class="flex justify-center gap-20">
<img src="img/s3_transport1.png" alt="运输图1" style="width: 323px; height: 136px;">
<img src="img/s3_transport2.png" alt="运输图2" style="width: 323px; height: 136px;">
<img src="img/s3_transport3.png" alt="运输图3" style="width: 323px; height: 136px;">
</div>
</div>
<div style="height: 50vh;"></div>
<!-- 最终结果 -->
<div class="result-block opacity-0">
<div class="text-[#ff0000] text-center text-[114px] mb-20">
外面的原料进不来，做好的产品出不去<br>
"逃离平江"<br>
成为了许多平江人无奈的选择
</div>
<div class="text-white text-center text-[87px]">
2000年平江县的辣条产业逐渐都往河南省迁移，<br>
河南辣条企业多达4000家
</div>
</div>
</div>
<script>
(function() {
// ... 保持现有动画脚本不变 ...
// 添加新的动画效果
['problem-title', 'comparison-block', 'geography-block', 'result-block'].forEach(className => {
new ScrollMagic.Scene({
triggerElement: `.${className}`,
triggerHook: 0.8,
duration: '100%'
})
.setTween(gsap.fromTo(`.${className}`,
{ opacity: 0, y: 100 },
{ opacity: 1, y: 0, duration: 1 }
))
.addTo(controller);
});
// 为新增的区块添加动画
['production-block', 'transport-block'].forEach(className => {
new ScrollMagic.Scene({
triggerElement: `.${className}`,
triggerHook: 0.8,
duration: '100%'
})
.setTween(gsap.fromTo(`.${className}`,
{ opacity: 0, y: 100 },
{ opacity: 1, y: 0, duration: 1 }
))
.addTo(controller);
});
// 自动调整背景高度
function adjustBackground() {
const section = document.querySelector('#assistance');
const mainContent = document.querySelector('main');
if (section) {
const sectionHeight = section.scrollHeight;
mainContent.style.minHeight = `${sectionHeight}px`;
}
}
// 页面加载和改变大小时调整背景
window.addEventListener('load', adjustBackground);
window.addEventListener('resize', adjustBackground);
})();
</script>
<section id="assistance" class="flex flex-col items-center justify-center">
<!-- 数据对比部分 -->
<div class="data-section" style="width: 80vw; z-index: 1;">
<!-- 其他内容... -->
<!-- 添加图表 -->
<div class="chart-container" style="width: 80%; margin: auto; padding: 50px;">
<canvas id="myChart"></canvas>
</div>
<!-- 其他内容... -->
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 其他现有代码...
// 创建图表
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // 图表类型
data: {
labels: ['湖南省', '河南省'], // 标签
datasets: [{
label: '小麦种植面积 (千公顷)',
data: [118.60, 4922.33], // 数据
backgroundColor: [
'rgba(255, 226, 0, 0.6)', // 湖南省颜色
'rgba(255, 0, 0, 0.6)' // 河南省颜色
],
borderColor: [
'rgba(255, 226, 0, 1)',
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '面积 (千公顷)'
}
}
},
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
title: {
display: true,
text: '小麦种植面积对比'
}
}
}
});
});
</script>
</body>
</html>
<!--
添加多张重叠的工厂图片
<img class="factory_img factory_1" src="img/s3_工厂.png" alt="工厂图片1"
style="width: 30vw; position: fixed; left: 10%; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0;">
<img class="factory_img factory_2" src="img/s3_工厂2.png" alt="工厂图片2"
style="width: 30vw; position: fixed; left: 10%; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0;">
<img class="factory_img factory_3" src="img/s3_工厂3.png" alt="工厂图片3"
style="width: 30vw; position: fixed; left: 10%; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0;">
<img class="factory_img factory_4" src="img/s3_工厂4.png" alt="工厂图片4"
style="width: 30vw; position: fixed; left: 10%; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0;">
</div>
// 文字图片
(function() {
// 初始化 ScrollMagic 控制器
var controller = new ScrollMagic.Controller();
// 为每个文字块创建单独的动画，同时控制对应的工厂图片
document.querySelectorAll('.text-block').forEach((block, index) => {
// 文字动画
var textTween = gsap.timeline()
.fromTo(block,
{ opacity: 0 },
{ opacity: 1, duration: 1 }
)
.to(block,
{ opacity: 0, duration: 1 },
"+=2" // 停留2秒后淡出
);
// 工厂图片动画
var factoryTween = gsap.timeline()
.fromTo(`.factory_${index + 1}`,
{ opacity: 0 },
{ opacity: 1, duration: 1 }
)
.to(`.factory_${index + 1}`,
{ opacity: 0, duration: 1 },
"+=2"
);
// 合并文字和图片动画
var combinedTween = gsap.timeline()
.add(textTween, 0)
.add(factoryTween, 0);
// 创建场景
var scene = new ScrollMagic.Scene({
triggerElement: block,
duration: 800,
offset: -300
})
.setTween(combinedTween)
.addIndicators()
.addTo(controller);
});
})();
-->