Narrative-Visualization-Project/demo.html at main · LouisCanBe/Narrative-Visualization-Project · GitHub

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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
    <link href="https://ai-public.mastergo.com/gen_page/tailwind-custom.css" rel="stylesheet" />


    <script
        src="https://cdn.tailwindcss.com/3.4.5?plugins=forms@0.5.7,typography@0.5.13,aspect-ratio@0.4.2,container-queries@0.1.1"></script>
    <script src="https://ai-public.mastergo.com/gen_page/tailwind-config.min.js" data-color="#D20000"
        data-border-radius="medium"></script>
    <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>

    <style>
        /* 隐藏默认滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        /* 滚动条轨道 */
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            background: rgba(210, 0, 0, 0.5);
            border-radius: 4px;
        }

        /* 鼠标悬停在滑块上的效果 */
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(210, 0, 0, 0.8);
        }

        #moving-element {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: left 0.5s ease;
        }
    </style>
</head>

<body class="bg-black text-white overflow-x-hidden">
    <nav class="fixed top-0 w-full bg-black bg-opacity-80 backdrop-blur-sm z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold">我，辣条</div>
                <div class="hidden md:flex space-x-8">
                    <a href="#origin" class="hover:text-custom transition-colors">起源</a>
                    <a href="#help" class="hover:text-custom transition-colors">帮扶</a>
                    <a href="#constraint" class="hover:text-custom transition-colors">约束</a>
                    <a href="#transform" class="hover:text-custom transition-colors">转型</a>
                    <a href="#review" class="hover:text-custom transition-colors">回顾</a>
                    <a href="#summary" class="hover:text-custom transition-colors">总结</a>
                </div>
                <button class="md:hidden text-2xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>
    <main class="relative min-h-screen">
        <div class="fixed inset-0 w-full h-full transition-opacity duration-1000">
            <img src="img/image (1).png" class="w-full h-full object-cover" alt="背景图片" />
        </div>
        <div class="fixed inset-0 w-full h-full opacity-0 transition-opacity duration-1000">
            <img src="img/image (2).png" class="w-full h-full object-cover" alt="背景图片2" />
        </div>
        <div class="fixed inset-0 w-full h-full opacity-0 transition-opacity duration-1000">
            <img src="img/image (3).png" class="w-full h-full object-cover" alt="背景图片3" />
        </div>
        <div class="fixed inset-0 w-full h-full opacity-0 transition-opacity duration-1000">
            <img src="img/image (4).png" class="w-full h-full object-cover" alt="背景图片4" />
        </div>
        <div class="fixed inset-0 w-full h-full opacity-0 transition-opacity duration-1000">
            <img src="img/image (5).png" class="w-full h-full object-cover" alt="背景图片5" />
        </div>
        <div class="fixed inset-0 w-full h-full opacity-0 transition-opacity duration-1000">
            <img src="img/image (5).png" class="w-full h-full object-cover" alt="背景图片6" />
        </div>
        <div class="relative pt-24 pb-20 container mx-auto">
            <div class="fixed left-[10vw] top-1/2 transform -translate-y-1/2 flex flex-col space-y-4 pointer-events-none w-[10vw] mt-24"
                style="position: fixed; left: 10vw; top: 50%; transform: translateY(-50%) scale(0.5); display: flex; flex-direction: column; gap: 1rem; width: 10vw; z-index: 40;">
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="origin" style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease">
                    <img src="https://ai-public.mastergo.com/ai/img_res/53419713f70a16435d9451473f50ce53.jpg"
                        class="w-full rounded" alt="起源缩略图" /></div>
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="help" style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease"><img
                        src="https://ai-public.mastergo.com/ai/img_res/091b9af45385546b6b0f013634cb0593.jpg"
                        class="w-full rounded" alt="帮扶缩略图" /></div>
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="constraint"
                    style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease"><img
                        src="https://ai-public.mastergo.com/ai/img_res/404973163840eecaa9f2cd82e016ff9c.jpg"
                        class="w-full rounded" alt="约束缩略图" /></div>
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="transform" style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease">
                    <img src="https://ai-public.mastergo.com/ai/img_res/45cd12907fdd0f3a527fba32e768bed9.jpg"
                        class="w-full rounded" alt="转型缩略图" /></div>
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="review" style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease">
                    <img src="https://ai-public.mastergo.com/ai/img_res/01a972ff7304f9b515a1c0215a97531e.jpg"
                        class="w-full rounded" alt="回顾缩略图" /></div>
                <div class="bg-black bg-opacity-50 p-2 rounded-lg transform scale-0 transition-all duration-500 mb-2"
                    data-section="summary" style="opacity: 0; transform: translateY(20px); transition: all 0.5s ease">
                    <img src="https://ai-public.mastergo.com/ai/img_res/486d221ed3b86fd4700962d29beab5af.jpg"
                        class="w-full rounded" alt="总结缩略图" /></div>
            </div>
            <section id="origin" class="min-h-screen flex items-center justify-center">
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4 transform translate-y-0 opacity-100 transition-all duration-1000"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">诞生于洪灾的滋味</h2>
                    <p class="text-lg leading-relaxed text-center">
                        第一章节，主要讲述了平江县的辣条是洪水之中，结合农民的智慧而诞生的，一经问世就在平江县畅销
                    </p>
                    <!-- <div class="flex justify-center space-x-4 mt-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/5485396a1b881b834bb1cf35a80d7e61.jpg" class="w-20 h-20 rounded-lg object-cover" alt="起源图1"/><img src="https://ai-public.mastergo.com/ai/img_res/a6906ce05269642f08608b47e6302436.jpg" class="w-20 h-20 rounded-lg object-cover" alt="起源图2"/><img src="https://ai-public.mastergo.com/ai/img_res/c1d0b47c584551fca02ab03c17d65d6a.jpg" class="w-20 h-20 rounded-lg object-cover" alt="起源图3"/></div> -->
                </div>
            </section>
            <section id="help" class="min-h-screen flex items-center justify-center">
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">修一条通往外面的路</h2>
                    <p class="text-lg leading-relaxed text-center">
                        辣条规模在增长过程中因为运输和成本问题的陷入长久僵局，大量工人流失。修路通路过后，辣条企业迅速成功，主要通过描写辣条视角中工厂的变化
                    </p>
                    <!-- <div class="flex justify-center space-x-4 mt-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/3cb06825f5fcdb4e1c8c99002506a4a8.jpg" class="w-20 h-20 rounded-lg object-cover" alt="帮扶图1"/><img src="https://ai-public.mastergo.com/ai/img_res/995c4071ffec596a2df4dad975f8dc6e.jpg" class="w-20 h-20 rounded-lg object-cover" alt="帮扶图2"/><img src="https://ai-public.mastergo.com/ai/img_res/aa6196386dc04808424f4e8a12e9b5fa.jpg" class="w-20 h-20 rounded-lg object-cover" alt="帮扶图3"/></div> -->
                </div>
            </section>

            <section id="constraint" class="min-h-screen items-center justify-center">
                <div id="square" style="width: 100px; height: 100px; background-color: red;"></div>
                <div id="square2" style="width: 100px; height: 100px; background-color: black;"></div>
                <script>
                    // Initialize ScrollMagic Controller
                    var controller = new ScrollMagic.Controller();
                    // Create animation using GSAP for square
                    var tween1 = gsap.to("#square", {x: 1000, duration: 1});
                    // Create animation using GSAP for square2
                    var tween2 = gsap.to("#square2", {x: 1000, duration: 1});
                    // Create ScrollMagic Scene for square
                    var scene1 = new ScrollMagic.Scene({
                        triggerElement: "#square",
                        duration: 100
                    })
                    .setTween(tween1)
                    .addIndicators() // Add indicators (requires plugin)
                    .addTo(controller);
                    // Create ScrollMagic Scene for square2
                    var scene2 = new ScrollMagic.Scene({
                        triggerElement: "#square2",
                        duration: 200,
                        offset: -100,
                    })
                    .setTween(tween2)
                    .addIndicators() // Add indicators (requires plugin)
                    .addTo(controller);
                </script>
                </script>
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">不能成为垃圾的我</h2>
                    <p class="text-lg leading-relaxed text-center">
                        食品安全问题给整个辣条产业泼了一盆冷水被评为垃圾食品。在当地企业和平江县政府的支持下，制定标准，工厂升级
                    </p>
                    <!-- <div class="flex justify-center space-x-4 mt-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/2007feb1f13443ad759f5ed6e41da61d.jpg" class="w-20 h-20 rounded-lg object-cover" alt="约束图1"/><img src="https://ai-public.mastergo.com/ai/img_res/e26ef728481d1b0e03de362d5ba9fa35.jpg" class="w-20 h-20 rounded-lg object-cover" alt="约束图2"/><img src="https://ai-public.mastergo.com/ai/img_res/6d3a1ac4d60c3d619e4704d595e7206c.jpg" class="w-20 h-20 rounded-lg object-cover" alt="约束图3"/></div> -->
                </div>
            </section>
            <section id="transform" class="min-h-screen flex items-center justify-center">
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">来一场主动的破局</h2>
                    <p class="text-lg leading-relaxed text-center">
                        平江县的辣条企业主动将原料端和销售端拉回本地，通过直播、联名等形式提高营销能力，并通过校企合作提高本地辣椒产量
                    </p>
                    <!-- <div class="flex justify-center space-x-4 mt-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/c3346b9c899d08af57e8fc7fa878474f.jpg" class="w-20 h-20 rounded-lg object-cover" alt="转型图1"/><img src="https://ai-public.mastergo.com/ai/img_res/9b4cb399d6babb471e33b9231f9ff2fb.jpg" class="w-20 h-20 rounded-lg object-cover" alt="转型图2"/><img src="https://ai-public.mastergo.com/ai/img_res/dd07ff3c6297277b8af0f70690567bdd.jpg" class="w-20 h-20 rounded-lg object-cover" alt="转型图3"/></div> -->
                </div>
            </section>
            <section id="review" class="min-h-screen flex items-center justify-center">
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">摘下贫困的帽子</h2>
                    <p class="text-lg leading-relaxed text-center">
                        回顾辣条产业的变化给平江县带来了多少产值的变化，带来大量工作岗位，并摘掉了贫困县的帽子
                    </p>
                    <div class="flex justify-center space-x-4 mt-6">
                        <!-- <img src="https://ai-public.mastergo.com/ai/img_res/949e7b33fb488559a23c94e197ce3150.jpg" class="w-20 h-20 rounded-lg object-cover" alt="回顾图1"/><img src="https://ai-public.mastergo.com/ai/img_res/98d0c6a5d52da52b5260f8bbfaa3b781.jpg" class="w-20 h-20 rounded-lg object-cover" alt="回顾图2"/><img src="https://ai-public.mastergo.com/ai/img_res/6335a49c3290e3753e787240a50c6915.jpg" class="w-20 h-20 rounded-lg object-cover" alt="回顾图3"/></div></div> -->
                    </div>
            </section>
            <section id="summary" class="min-h-screen flex items-center justify-center">
                <div class="bg-black bg-opacity-70 p-8 rounded-lg max-w-2xl mx-4"
                    style="margin-top: 80px; margin-bottom: 80px;">
                    <h2 class="text-3xl font-bold mb-4 text-center">建造更美好的明天</h2>
                    <p class="text-lg leading-relaxed text-center">
                        回顾脱贫攻坚期间产业振兴中典型产业的作用和最后达成的成果
                    </p>
                    <!-- <div class="flex justify-center space-x-4 mt-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/dab4bf455adce742e6c3da72ac7abd5b.jpg" class="w-20 h-20 rounded-lg object-cover" alt="总结图1"/><img src="https://ai-public.mastergo.com/ai/img_res/7890b9a128e26633ddcd569d37f622d4.jpg" class="w-20 h-20 rounded-lg object-cover" alt="总结图2"/><img src="https://ai-public.mastergo.com/ai/img_res/8e4b1afa40e21a3d1bd87fd52aaa50b8.jpg" class="w-20 h-20 rounded-lg object-cover" alt="总结图3"/></div> -->
                </div>
            </section>
        </div>
        <footer
            class="fixed bottom-0 w-full bg-black bg-opacity-80 backdrop-blur-sm opacity-0 transition-opacity duration-500">
            <div class="container mx-auto px-6 py-4">
                <div class="flex flex-wrap justify-between items-center">
                    <div class="flex space-x-6">
                        <a href="#" class="hover:text-custom transition-colors">联系我们</a>
                        <a href="#" class="hover:text-custom transition-colors">隐私政策</a>
                        <a href="#" class="hover:text-custom transition-colors">帮助中心</a>
                    </div>
                    <div class="text-sm">© 2024 数据动画. 保留所有权利</div>
                </div>
            </div>
        </footer>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 获取所有section元素
            const sections = document.querySelectorAll('section');
            // 获取所有导航链接
            const navLinks = document.querySelectorAll('nav a');
            // 获取所有背景元素
            const backgrounds = document.querySelectorAll('.fixed.inset-0');
            // 获取所有缩略图元素
            const thumbnails = document.querySelectorAll('[data-section]');
            // 获取页脚元素
            const footer = document.querySelector('footer');
            // 定义观察器选项
            const observerOptions = {
                root: null,
                rootMargin: '-20% 0px',
                threshold: 0.5
            };
            // 创建观察器
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // 获取当前交叉的元素的ID
                        const id = entry.target.getAttribute('id');
                        // 根据当前交叉的元素ID，高亮对应的导航链接
                        navLinks.forEach(link => {
                            if (link.getAttribute('href') === `#${id}`) {
                                link.classList.add('text-custom');
                            } else {
                                link.classList.remove('text-custom');
                            }
                        });
                        // 根据当前交叉的元素ID，显示对应的背景
                        backgrounds.forEach((bg, index) => {
                            bg.style.opacity = index === Array.from(sections).findIndex(section => section.id === id) ? '1' : '0';
                        });
                        // 根据当前交叉的元素ID，显示对应的缩略图
                        thumbnails.forEach(thumb => {
                            const thumbSection = thumb.getAttribute('data-section');
                            if (thumbSection === id) {
                                thumb.style.transform = 'scale(1)';
                                thumb.style.opacity = '1';
                            } else {
                                thumb.style.transform = 'scale(0)';
                                thumb.style.opacity = '0';
                            }
                        });
                        // 如果当前交叉的元素ID是“summary”，则显示页脚
                        if (id === 'summary') {
                            footer.style.opacity = '1';
                        } else {
                            footer.style.opacity = '0';
                        }
                    }
                });
            }, observerOptions);

            // 对每个section元素进行观察
            sections.forEach(section => observer.observe(section));

            // 获取移动菜单按钮和移动菜单
            const mobileMenuButton = document.querySelector('nav button');
            const mobileMenu = document.querySelector('nav div.hidden');
            // 监听移动菜单按钮的点击事件
            mobileMenuButton.addEventListener('click', () => {
                // 切换移动菜单的显示和隐藏
                mobileMenu.classList.toggle('hidden');
                mobileMenu.classList.toggle('flex');
            });

            // 监听所有锚点链接的点击事件
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    // 获取目标元素的ID
                    const targetId = this.getAttribute('href');
                    // 获取目标元素
                    const targetElement = document.querySelector(targetId);
                    // 如果目标元素存在，则平滑滚动到目标元素
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth' });
                    }
                });
            });
        });


        document.addEventListener('DOMContentLoaded', () => {
            const movingElement = document.getElementById('moving-element');
            const secondSection = document.getElementById('second-section');
            let isElementMoving = false;

            window.addEventListener('scroll', () => {
                const sectionRect = secondSection.getBoundingClientRect();
                const elementRect = movingElement.getBoundingClientRect();

                if (sectionRect.top <= window.innerHeight && sectionRect.bottom >= 0 && !isElementMoving) {
                    // Prevent the page from scrolling up
                    document.body.style.overflow = 'hidden';

                    // Calculate the scroll percentage
                    const scrollPercentage = (window.innerHeight - sectionRect.top) / (window.innerHeight + sectionRect.height);

                    // Move the element horizontally
                    movingElement.style.left = `${scrollPercentage * 100}%`;

                    // Check if the element has reached the desired position
                    if (scrollPercentage >= 1) {
                        isElementMoving = true;
                        document.body.style.overflow = 'auto';
                    }
                } else if (isElementMoving) {
                    // Allow the page to scroll up after the element has moved
                    document.body.style.overflow = 'auto';
                }
            });
        });

    </script>

</body>

</html>