-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
335 lines (322 loc) · 15.4 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T7WT8PSS8Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-T7WT8PSS8Z');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="海鮮大揭密，圖文x遊戲x社群，從辨識、挑貨技巧、食材處理至相關美食，一起來場水中探險。讓我們一起跟蔚蔚從餐桌回溯，認識我們的食魚文化吧！本網站為嘉義大學數位學習設計與管理學系110級畢業專題。">
<meta name="author" content="味補鮮知">
<meta name="robots" content="index, follow" />
<meta property="og:image" content="./img/bg/og72.jpg" />
<title>味補鮮知 - 海鮮的秘密 | 台灣食魚文化大揭密</title>
<link rel="icon" href="./img/bg/f.svg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Monda&family=Noto+Sans+TC&display=swap">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./rwd.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css">
<!-- 由 Google 結構化資料標記協助工具產生的 JSON-LD 標記。 -->
<script type="application/ld+json">
[
{
"@context": "http://schema.org",
"@type": "Article",
"name": "別用觸腕旋轉我",
"image": "https://87penginnouta.github.io/Cfood_enter/img/sea/item1_light.png",
"articleBody": "「頭足類表示花枝亂站。」"
},
{
"@context": "http://schema.org",
"@type": "Article",
"name": "天黑請閉殼",
"image": "https://87penginnouta.github.io/Cfood_enter/img/sea/item2_light.png",
"articleBody": "「要貝類閉嘴……很不禮貌。」"
},
{
"@context": "http://schema.org",
"@type": "Article",
"name": "鰭士團招募中",
"image": "https://87penginnouta.github.io/Cfood_enter/img/sea/item3_light.png",
"articleBody": "「我們會定期舉辦魚類甩尾大賽。」"
},
{
"@context": "http://schema.org",
"@type": "Article",
"name": "發出可剝的聲音",
"image": "https://87penginnouta.github.io/Cfood_enter/img/sea/item4_light.png",
"articleBody": "「蝦類覺得宇宙害羞。」"
}
]
</script>
</head>
<body>
<div class="loading_wrapper">
<div class="loading_content">
<h5 class="word_lo w1">味</h5>
<h5 class="word_lo w2">補</h5>
<h5 class="word_lo w3">鮮</h5>
<h5 class="word_lo w4">知</h5>
<div class="ico"></div>
</div>
</div>
<div id="bg">
<div id="section1">
<div class="star s_right" data-0="top:4%; right:0%;" data-300="top:50%; right:-20%;"></div>
<div class="star s_left" data-0="top:4%; left:0%;" data-300="top:50%; left:-20%;"></div>
<h1 class="logo" data-0="top: 20%;" data-300="top: 30%;">嘉義大學數位系110級畢業專題</h1>
<div class="sea" data-0="top:70%; height: 80%;" data-600="top: 100%; height: 0%;">
<div class="wave1" data-0="height:30%;" data-600="height:40%;"></div>
<div class="wave2" data-0="height:40%;" data-600="height:50%;"></div>
</div>
<div class="submarine" data-0="top:70%; left:40%; transform:rotate(0deg) scaleX(1);"
data-300="top:70%; left:40%; transform:rotate(0deg) scaleX(1);"
data-500="top:100%; left:40%; transform:rotate(0deg) scaleX(1);"
data-700="top:120%; left:10%; transform:rotate(-10deg) scaleX(1);"
data-900="top:150%; left:10%; transform:rotate(0deg) scaleX(1);"
data-950="top:170%; left:30%; transform:rotate(10deg) scaleX(1);"
data-1000="top:200%; left:40%; transform:rotate(10deg) scaleX(1);"
data-1020="top:200%; left:40%; transform:rotate(-10deg) scaleX(-1);"
data-1200="top:230%; left:30%; transform:rotate(-10deg) scaleX(-1);"
data-1400="top:250%; left:30%; transform:rotate(-10deg) scaleX(-1);"
data-1420="top:250%; left:30%; transform:rotate(10deg) scaleX(1);"
data-1600="top:270%; left:40%; transform:rotate(10deg) scaleX(1);"
data-1800="top:300%; left:40%; transform:rotate(10deg) scaleX(1);"
data-1820="top:300%; left:40%; transform:rotate(-10deg) scaleX(-1);"
data-2000="top:330%; left:30%; transform:rotate(-10deg) scaleX(-1);"
data-2200="top:350%; left:30%; transform:rotate(-10deg) scaleX(-1);"
data-2400="top:370%; left:30%; transform:rotate(-10deg) scaleX(-1);"
data-2420="top:370%; left:30%; transform:rotate(10deg) scaleX(1);"
data-2500="top:380%; left:100%; transform:rotate(0deg) scaleX(1);"></div>
<div class="under_sea" data-0="top:150%; height: 350%;" data-600="top:100%; height: 400%;">
<div class="info open_info">嘿！我們昨晚<span class="highlight">吃了什麼</span>？<br><br>
<h1 class="content open_content">
你或許記得綠色的是花椰菜，<br>紅色的是胡蘿蔔，<br>不過，盤子裡的魚究竟叫什麼呀？<br><br>哎呀，想不出答案也沒關係，<br>讓我們一起跟蔚蔚從餐桌回溯，<br>認識我們的<span
class="highlight">食魚文化</span>吧！</h1>
</div>
<div class="dinner">
<div class="broccoli"></div>
<div class="carrot"></div>
<div class="salmon"></div>
</div>
</div>
<div id="island" data-0="top:10%;" data-300="top: -40%;">
<div class="ground"></div>
<div class="land">
<div class="shima"></div>
<div class="kuruma"></div>
<div class="nabe_bottom"></div>
<div class="enoki"></div>
<div class="tofu"></div>
<div class="shiitake"></div>
<div class="kani"></div>
<div class="toumorokoshi"></div>
<div class="hamaguri"></div>
<div class="maru"></div>
<div class="fly"></div>
<div class="traveler t_top" data-0="top:25%; opacity:1; transform: translate(-50%);"
data-300="top:50%; opacity:0.5; transform: translate(-50%);"></div>
<div class="nabe_top"></div>
<div class="ebi"></div>
<div class="hana"></div>
<div class="takoyaki"></div>
<div class="sign"></div>
<div class="tako t1"></div>
<div class="tako t2"></div>
<div class="hikari"></div>
<div class="toudai"></div>
<div class="shouyu"></div>
<div class="shouyu_top"></div>
<div class="rouru"></div>
<div class="sushi s1"></div>
<div class="sushi s2"></div>
<div class="sushi s3"></div>
<div class="sushi s4"></div>
</div>
</div>
</div>
<div id="section2">
<div class="container c1" data-aos="fade-up-right" data-aos-anchor-placement="bottom-bottom">
<div class="icon i1">
<img src="./img/sea/item1_light.png" alt="頭足類">
</div>
<div class="c_content">
<div class="info_stop i_left">
<span class="highlight_stop">STOP</span><span class="highlight_number"> 01</span><br>別用觸腕旋轉我！<br>
</div>
<span class="content">「頭足類表示花枝亂站。」</span>
<a class="btn b_left" href="https://87penginnouta.github.io/Cfood_Cephalopoda/">READ MORE</a>
</div>
</div>
<div class="container c2" data-aos="fade-up-left" data-aos-anchor-placement="bottom-bottom">
<div class="icon i2">
<img src="./img/sea/item2_light.png" alt="貝類">
</div>
<div class="c_content">
<div class="info_stop i_left">
<span class="highlight_stop">STOP</span><span class="highlight_number"> 02</span><br>天黑請閉殼！<br>
</div>
<span class="content">「要貝類閉嘴……很不禮貌。」</span>
<a class="btn b_left" href="https://87penginnouta.github.io/Cfood_Shellfish/">READ MORE</a>
</div>
</div>
<div class="container c3" data-aos="fade-up-right" data-aos-anchor-placement="bottom-bottom">
<div class="icon i3">
<img src="./img/sea/item3_light.png" alt="魚類">
</div>
<div class="c_content">
<div class="info_stop i_left">
<span class="highlight_stop">STOP</span><span class="highlight_number"> 03</span><br>鰭士團招募中！<br>
</div>
<span class="content">「我們會定期舉辦魚類甩尾大賽。」</span>
<a class="btn b_left" href="https://87penginnouta.github.io/Cfood_Fish/">READ MORE</a>
</div>
</div>
<div class="container c4" data-aos="fade-up-left" data-aos-anchor-placement="bottom-bottom">
<div class="icon i4">
<img src="./img/sea/item4_light.png" alt="蝦類">
</div>
<div class="c_content">
<div class="info_stop i_left">
<span class="highlight_stop">STOP</span><span class="highlight_number"> 04</span><br>發出可剝的聲音！<br>
</div>
<span class="content">「蝦類覺得宇宙害羞。」</span>
<a class="btn b_left" href="https://87penginnouta.github.io/Cfood_Shrimp/">READ MORE</a>
</div>
</div>
</div>
<div id="section3">
<div class="rock">
<img src="./img/sea/rock.png" alt="海底的岩石">
</div>
<div class="game">
<div class="egg" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<img src="./img/sea/egg.png" alt="海底的轉蛋機">
<label class="modal_btn" for="modal-1">
<div class="egg_btn"></div>
</label>
</div>
</div>
<div class="grass"></div>
<div class="sand">
<img src="./img/sea/sand.png" alt="海底的沙">
</div>
<div class="copyright">
<p>©嘉義大學數位系110級畢業專題味補鮮知-海鮮的秘密</p>
</div>
<div class="info open_info"><span class="highlight">鮮之塔</span>的食客<br><br>
<h1 class="content open_content">
經過一場海底之旅，<br>想必你也知道不少海鮮的秘密了吧？<br><br>旅行的最後，我們準備了愉快的小測驗，<br>按下<span
class="highlight">扭蛋機</span>的按鈕，<br>證明你也是偉大鮮知的一員吧！</h1>
</div>
</div>
</div>
<div class="who_modal_1">
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<div class="modal_inner_bg"></div>
<label class="modal__close" for="modal-1"></label>
<div class="game_content">
<img class="game_logo" src="./img/sea/game_logo.jpg" alt="鮮之塔的食客">
<ul class="game_nav">
<li class="game_li content">遊戲類型：冒險/劇情向/猜題遊戲</li>
<li class="game_li content">遊玩時間：約10至15分鐘</li>
</ul>
<div class="g_link_area">
<a class="game_link g1"
href="https://onedrive.live.com/download?cid=798697C7AA5B4329&resid=798697C7AA5B4329%21108&authkey=AI3Ae6mlR8sNeyM">
<img class="game_icon" src="./img/windows.svg" alt="鮮之塔的食客_windows版">
<div class="game_word"> Windows版下載</div>
</a>
<a class="game_link g2"
href="https://onedrive.live.com/download?cid=798697C7AA5B4329&resid=798697C7AA5B4329%21107&authkey=AL6q2Vc9strMiXY">
<img class="game_icon" src="./img/apple.svg" alt="鮮之塔的食客_MacOS版">
<div class="game_word"> MacOS版下載</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="buttons_all">
<a id="gotop" href="#">
<img class="btn_img" src="./img/up.svg" alt="回到上方">
</a>
</div>
<div id="menu_all">
<!--menu-->
<input id="toggle" type="checkbox" />
<span class="menu_bg">
<div class="menu_link_content">
<div class="menu_nav">
<a class="menu_web w1 m_hover" href="https://87penginnouta.github.io/Cfood_prologue/">
<span class="m_span">Prologue</span>
<div class="menu_link">前言</div>
</a>
<a class="menu_web w2 m_hover" href="https://87penginnouta.github.io/Cfood_enter/">
<span class="m_span">Top</span>
<div class="menu_link">首頁</div>
</a>
<a class="menu_web w3 m_hover" href="https://87penginnouta.github.io/Cfood_Cephalopoda/">
<span class="m_span">Stop-1</span>
<div class="menu_link m_big">別用觸腕旋轉我</div>
</a>
<a class="menu_web w4 m_hover" href="https://87penginnouta.github.io/Cfood_Shellfish/">
<span class="m_span">Stop-2</span>
<div class="menu_link m_big">天黑請閉殼</div>
</a>
<a class="menu_web w5 m_hover" href="https://87penginnouta.github.io/Cfood_Fish/">
<span class="m_span">Stop-3</span>
<div class="menu_link m_big">鰭士團招募中</div>
</a>
<a class="menu_web w6 m_hover" href="https://87penginnouta.github.io/Cfood_Shrimp/">
<span class="m_span">Stop-4</span>
<div class="menu_link m_big">發出可剝的聲音</div>
</a>
<a class="menu_web w7 m_hover" href="https://87penginnouta.github.io/Cfood_epilogue/">
<span class="m_span">Epilogue</span>
<div class="menu_link">尾聲</div>
</a>
<div class="menu_web w_line"><span class="m_span"></span></div>
</div>
<img class="menu_img" src="./img/sea/submarine.png" alt="味補鮮知_選單">
</div>
<div class="sns_content s_menu">
<a class="sns_btn s_fb" href="https://www.facebook.com/Cfood.secret" target="_blank">
<img class="btn_img" src="./img/facebook.svg" alt="味補鮮知_facebook">
</a>
<a class="sns_btn s_ig" href="https://www.instagram.com/fishkw.2020/" target="_blank">
<img class="btn_img" src="./img/ins.svg" alt="味補鮮知_instagram">
</a>
</div>
</span>
<!-- <span class="text">MENU</span> -->
<div id="menu">
<div class="hamburger">
<label for="toggle" class="la">
<svg class="ham hamRotate" viewbox="0 0 100 100" width="80" onclick="this.classList.toggle('active')">
<path class="line top"
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
<path class="line middle" d="m 30,50 h 40" />
<path class="line bottom"
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
</svg>
</label>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="./script.js"></script>
</body>
</html>