-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlulla.html
130 lines (98 loc) · 5.09 KB
/
lulla.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
<!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 = "lulla.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>Lulla</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/Lulla.jpg"></img>
</div>
<div class="main-hero2">
<img onclick="nextImg2()" class="img2" src="./Images/Lulla-Wire.jpg"></img>
</div>
<div class="main-hero3">
<img onclick="nextImg3()" class="img3" src="./Images/Lulla-Booking.jpg"></img>
</div>
<div class="main-hero4" >
<img onclick="nextImg4()" class="img4" src="./Images/Lulla-Mockups.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>Lulla</h2>
<p>Lulla is conceptual project for an anxiety management and social media platform for pregnant women.</p> <p>Research shows that social and (immediate) professional support helps ease stress and anxiety among pregnant women. If these are readily available and combined with meditation exercises guided by data-driven HRV (or “stress”) sensors (as seen in some Apple Watch applications), a platform like this could benefit expecting mothers throughout their gestation.</p>
</div>
<div class="sidebar">
<h3>ROLE</h3>
<h2>UI/UX Designer</h2>
<br>
<a target="_blank" style="text-decoration:none;" href="https://www.behance.net/gallery/92025989/Lulla"><h4 class="site-link">VISIT CASE STUDY</h4></a>
</div>
<div class="next-button">
<a href="/weconvert.html" style="text-decoration:none;">
<h3>NEXT PROJECT</h3>
<h2>WeConvert</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>