-
Notifications
You must be signed in to change notification settings - Fork 0
/
trace.html
137 lines (102 loc) · 5.53 KB
/
trace.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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');
</style>
<link rel = "stylesheet" type = "text/css" href = "trace.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Trace</title>
</head>
<body>
<img class="bg" src="./Images/BG.svg"> </img>
<div class="transition-grid">
<a href="/index.html">
<div class="nav-sec">
<img class="nav-arrow" height="25px" width="44.54px" src="back_arrow.svg" alt="navigation arrow">
</div>
</a>
<div class="main-hero1" onclick="nextImg1()" >
<img class="img1" src="./Images/trace-head.jpg"></img>
</div>
<div class="main-hero2">
<img onclick="nextImg2()" class="img2" src="./Images/trace1.jpg"></img>
</div>
<div class="main-hero3">
<img onclick="nextImg3()" class="img3" src="./Images/trace2.jpg"></img>
</div>
<div class="main-hero4" >
<img onclick="nextImg4()" class="img4" src="./Images/trace3.jpg"></img>
</div>
<div class="pagination">
<span class="numerator" id="numerator">1</span>
<span>/</span>
<span class="denominator">4</span>
</div>
<div class="project-text-grp">
<h3>PROJECT</h3>
<h2>Trace</h2>
<p>Trace is a conceptual mobile application that generates unique identification keys and makes use of our phone's Bluetooth technology to scan the health condition of nearby users. If users come into contact with a Covid-19 positive patient then they will be notified and informed of the next steps to take.</p>
<p>Other features include a free test-kit delivery service for those that report symptoms, a news feed from reputable news outlets regarding Covid-19, and a primer on everything there is to know about Covid-19.</p>
<p>Other features include a free test-kit delivery service for those that report symptoms, a news feed from reputable news outlets regarding Covid-19, and a primer on everything there is to know about Covid-19.</p>
<p>It was inspired by an article from Bloomberg which tackles the number of privacy issues that surround tracing apps.</p>
</div>
<div class="sidebar">
<h3>ROLE</h3>
<h2>UI/UX Designer</h2>
<h2>Illustrator</h2>
<br>
<a target="_blank" style="text-decoration:none;" href="https://www.behance.net/gallery/98357717/Trace-Covid-19-Tracing-App-UI"><h4 class="site-link">VISIT CASE STUDY</h4></a>
</div>
<div class="next-button">
<a href="/lulla.html" style="text-decoration:none;">
<h3>NEXT PROJECT</h3>
<h2>Lulla</h2>
</a>
</div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="node_modules/swup/dist/swup.min.js"></script>
<script src="script.js"></script>
<script>
gsap.to('.main-hero2', {x: -1000, duration: .01})
gsap.to('.main-hero3', {x: -1000, duration: .01})
gsap.to('.main-hero4', {x: -1000, duration: .01})
function nextImg1(){
gsap.to('.main-hero1', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero1', {x: -1000, duration: .5, delay: .5, ease: Expo.easeOut})
gsap.to('.main-hero2', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 2
}
function nextImg2(){
gsap.to('.main-hero2', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero2', {x: -1000, duration: .5, delay: .5, ease: Expo.easeOut})
gsap.to('.main-hero3', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 3
}
function nextImg3(){
gsap.to('.main-hero3', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero3', {x: -1000, duration: .5, delay: .5, ease: Expo.easeOut})
gsap.to('.main-hero4', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 4
}
function nextImg4(){
gsap.to('.main-hero4', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero4', {x: -1000, duration: .5, delay: .5, ease: Expo.easeOut})
gsap.to('.main-hero1', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 1
}
gsap.from('.main-hero1', {opacity: 0, duration: 1, delay: .8, x: -200})
gsap.from('h3', {opacity: 0, duration: 1, delay: 1, x: 50})
gsap.from('h2', {opacity: 0, duration: 1, delay: 1.2, x: 50})
gsap.from('p', {opacity: 0, duration: 1, delay: 1.4, x: 50, stagger: .3})
gsap.from('.pagination', {opacity: 0, duration: 1, delay: 1.8, x: -50, stagger: .3})
gsap.from('.nav-sec', {opacity: 0, duration: 1, delay: 1.8})
gsap.from('.sidebar', {opacity: 0, duration: 1, delay: 2.6, x: 50, stagger: .3})
gsap.from('.next-button', {opacity: 0, duration: 1, delay: 3.4, x: 50, stagger: .3})
</script>
</body>
</html>