-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (146 loc) · 5.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shanghai-Metro-Scheme</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
.header {
background-image: url('./header.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
.intro {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* 艺术字体 */
.hcqFont{position:relative;letter-spacing:.07em;font-size:2em;font-weight:normal;margin:0 auto}
.hcqFont:before,.hcqFont:after{position:absolute;top:0;left:0;right:0}
.y1 {
/* width: 300px; */
/* height: 200px; */
/* position: absolute; */
/* left: 50%; */
/* margin-left: -150px; */
background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 4s linear infinite;
font-size: 18px;
}
.y2{display:inline-block;font-weight:bold;color:#def;text-shadow:0 0 1px currentColor,-1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,1px 0 1px #000,1px 1px 1px #000,0 1px 1px #000,-1px 1px 1px #000,-1px 0 1px #000;-webkit-filter:url(#diff1);filter:url(#diff1);/*background:#def;padding:0 .2em*/}
.y4{color: transparent;-webkit-text-stroke: 1px red;letter-spacing: 0.04em;}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
#section3{
background-color: #000;
}
#section3 .intro2{
display: flex;
flex-direction: column;
width: 1000px;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 500px;
box-shadow: 0 0 4px 4px rgb(115 115 115 / 50%);
padding: 20px;
}
#section3 .intro2 img{
width: 600px;
}
#section3 .intro2 p{
text-indent: 2em;
color: #fff;
}
</style>
<link href='./lib/jquery.pagepiling.css' rel='stylesheet' />
</head>
<body>
<div id="pagepiling">
<div class="section header" id="section1">
<div class="intro">
<p class="hcqFont y2">Tracks Through Time: The Evolution of Shanghai Metro</p>
<p class="y1">Eric Sun & Sunan Xu</p>
<p style="color: white;">Our project video can be found <a href="https://youtu.be/bUFORBluU30" target="_blank">here</a>.</p>
</div>
</div>
<div class="section middle" id="section3">
<div class="intro2">
<img src="./data/img/intro.png" />
<p >
Embarking on a narrative journey through the veins of Shanghai's bustling cityscape, we present an exploration of the evolution of the Shanghai Metro. This scrollytelling experience is designed to transport you through the dynamic history of one of the world's most extensive metro systems, offering a window into the urban tapestry that it has both shaped and been shaped by. Join us as we navigate the depths of planning principles, the ebb and flow of passenger tides, and the visionary expansions that chart the course of Shanghai's march towards the future.
</p>
</div>
</div>
<div class="section" id="section2">
<iframe id="myIframe" src="./map.html"></iframe>
</div>
</div>
</body>
<script src="./lib/jquery-3.5.1.min.js"></script>
<script src="./lib/jquery.pagepiling.min.js"></script>
<script>
let globalIndex = 1
$(function () {
$('#pagepiling').pagepiling({
// sectionsColor: ['#bfda00', '#2ebe21' ], // '#2C3E50', '#51bec4'
navigation: {
'position': 'right',
'tooltips': ['Home Page', 'Middle Page' ,'Map Page'], // 'Next Page'
// normalScrollElements: '#section4, .txt'
},
afterLoad: (anchorLink, index) => {
console.log(anchorLink, index)
if (index === 3 && globalIndex < index) {
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.addFirstLine()
}
globalIndex = index;
},
});
})
function goPagePre() {
$('li[data-tooltip="Middle Page"] a').trigger('click')
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.clearMetroLine()
}
function goPageNext() {
$('li[data-tooltip="Next Page"] a').trigger('click')
var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.clearMetroLine()
}
</script>
</html>