-
Notifications
You must be signed in to change notification settings - Fork 0
/
echo.html
235 lines (221 loc) · 11.2 KB
/
echo.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echo | Han Li</title>
<link rel='shortcut icon' type='image/jpg' href='images/favicon.png'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='addons/jquery.mousewheel.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-echo.css">
<link rel="stylesheet" type="text/css" href="css/style-work.css">
<script type='text/javascript'>
window.onload = function () {
document.getElementById("loading").style.right = "120%";
document.getElementById("loading").style.opacity = "0";
}
$(document).ready(function () {
$('html, body, *').mousewheel(function (e) {
// console.log(e.deltaX, e.deltaY, e.deltaFactor);
this.scrollLeft += (e.deltaX - e.deltaY)*e.deltaFactor;
// this.scrollTop = 0;
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false; //IE
}
});
});
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
video.pause();
}, false)
</script>
<script type='text/javascript' src="addons/p5.min.js"></script>
<script type='text/javascript' src="addons/p5.dom.min.js"></script>
<script type='text/javascript' src="js/sketch-echo.js"></script>
</head>
<body>
<div id="loading">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="loading-svg" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div id="home" onclick="location.href='index.html';">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="svg-bg" width="70" height="70" fill="white"/>
<path class="svg-home" d="M46 45H24L24 30.4093L35.3667 21L46 30.4093V47" stroke="white" stroke-width="4"/>
<path class="svg-lh" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div class="wrapper">
<section class="openning">
<h1 class="font-section-title">echo</h1>
<span class="divider divider-adjust"></span>
<div class="brief">
<p class="font-section-desc">
Echo is designed for capturing daily moments as photos or short videos, which users can share with close friends and family. These moments can be customized with stickers, captions, and more. In addition to connecting with friends, Echo offers users a glimpse into the lives of others by discovering interesting moments shared by strangers.
</p>
<p class="font-section-desc">
Our primary target users are college students and recent graduates, who are expanding their social networks. The new generation is familiar with a wide range of social networking apps and tends to be attracted to unique and unconventional experiences. Therefore, we aimed to create something distinct, even a bit "weird."
</p>
</div>
<div id="sketch"></div>
</section>
<section class="showcase sc-spaceline">
<div class="showcase-wrapper">
<div class="phone zoomin">
<div class="cover light"></div>
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/echo/video-index.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</div>
</section>
<section class="showcase">
<div class="showcase-desc">
<h2 class="font-showcase-title ">Simplified hierarchy for fullscreen</h2>
<p class="font-showcase-desc">
Traditional horizontal hierarchies often led users to get lost in pages with endless left swipes to return. As fullscreen usage trends increased, gestures became more convenient while top corners grew harder to reach. We took advantage of increased vertical space, allowing all kinds of modules to be accessed via slide-up cards, which can be closed by swiping down.
</p>
</div>
<div class="showcase-wrapper nomargin">
<img src="images/echo/C00-hierarchy.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-desc">
<h2 class="font-showcase-title ">DUOTONE COVER</h2>
<p class="font-showcase-desc">
Since the list of moments is the primary element that users see and interact with, we wanted to maximize the visual impact of the content. One challenge was ensuring that the photo covers didn’t appear chaotic. To solve this, we implemented a duotone filter to unify the colors of photos, with the colors adjusted to reflect the moment’s context.
</p>
</div>
<div class="showcase-wrapper nomargin">
<img src="images/echo/DUOTONE-COVER.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-desc">
<p class="font-showcase-desc">
When browsing moments, we aim to maintain a story-like immersive experience, with fullscreen content strictly adapting to different resolution ratios. This inspired us to make comments more intuitive. Users can tap and hold anywhere on the photo to leave a comment—making the comment directly tied to the related area.
</p>
</div>
<div class="showcase-wrapper">
<div class="phone come-closer-left ">
<div class="cover dark"></div>
<img src="images/echo/B00-My-Snap.jpg">
</div>
<div class="phone come-closer-right">
<div class="cover dark"></div>
<img src="images/echo/B04-ViewSnap-Comment.jpg">
</div>
</div>
</section>
<section class="showcase">
<div class="showcase-desc shorter">
<p class="font-showcase-desc">
Every moment shared after 24 hours gets archived in the profile as a Memoir. Although memories can be chaotic, we organized selected moments into a hand of well-arranged cards, presenting them in an easily digestible format.
</p>
</div>
<div class="showcase-wrapper nomargin">
<video class="sc-video-memoir" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
<source src="images/echo/video-memoir.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</section>
<section class="showcase">
<div class="showcase-desc longer">
<p class="font-showcase-desc">
Our camera’s goal is to capture every moment and thought quickly and in a variety of ways. Maintaining consistency across different capture methods ensures the same user experience, while also preserving the speed needed to capture spontaneous moments.
</p>
</div>
<div class="showcase-wrapper">
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/echo/B00-Camera.jpg">
</div>
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/echo/B02-Camera-Edit.jpg">
</div>
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/echo/A00-Text-Mode.jpg">
</div>
<div class="phone bg-light">
<div class="cover light"></div>
<img src="images/echo/C00-Record.jpg">
</div>
<div class="sc-camera-stickers">
<img width="180px" height="180px" src="images/echo/gif-5.gif">
<img width="180px" height="180px" src="images/echo/gif-1.gif">
<img width="180px" height="180px" src="images/echo/gif-4.gif">
<img width="180px" height="180px" src="images/echo/gif-6.gif">
<img width="180px" height="180px" src="images/echo/gif-3.gif">
<img width="180px" height="180px" src="images/echo/gif-2.gif">
</div>
</div>
</section>
<section class="showcase">
<div class="cube cube-nor">
<video class="sc-echo-loading2" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
<source src="images/echo/video-echo-loading2.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
<div class="cube cube-nor">
<video class="sc-echo-loading1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
<source src="images/echo/video-echo-loading.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
<div class="cube cube-main">
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/echo/video-im-notify.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</section>
<section class="showcase">
<div class="showcase-desc longer">
<p class="font-showcase-desc">
Besides from interacting with close friends, pull down from the top will enter another space full of thoughts and moments shared by strangers about various topics happening right at that moment.
</p>
<p class="font-showcase-desc">
Beyond interaction with close friends, swiping down from the top brings users into a space filled with thoughts and moments shared by strangers on trending topics. Instead of images, we chose to use words, as they convey thoughts more closely. We designed rules to limit the number of people here, ensuring each individual has a few meaningful connections -- though these are strangers.
</p>
</div>
<div class="showcase-wrapper">
<div class="phone bg-dark">
<div class="cover dark"></div>
<img src="images/echo/D00.jpg">
</div>
<div class="phone bg-dark">
<div class="cover dark"></div>
<img src="images/echo/D06-Spaceline-new.jpg">
</div>
<div class="phone bg-dark">
<div class="cover dark"></div>
<img src="images/echo/D05-Spaceline-new.jpg">
</div>
<div class="sc-now-othercolor">
<img src="images/echo/D01.jpg">
</div>
</div>
</section>
<section class="ending next" onclick="location.href='wechat.html';">
<div class="button">
<div class="arrow"></div>
<div class="line"></div>
</div>
<div class="title">
<span class="font-section-desc">UP NEXT</span>
<h1 class="font-section-title">WeChat</h1>
</div>
</section>
</div>
</body>
</html>