-
Notifications
You must be signed in to change notification settings - Fork 0
/
dice-1.html
160 lines (121 loc) · 6.01 KB
/
dice-1.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
<!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 = "dice-1.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>Dante Cardines III | Digital Designer</title>
<link rel="shortcut icon" type="image/png" href="favicon.png">
</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/dice-hero.jpg"></img>
</div>
<div class="main-hero2">
<img onclick="nextImg2()" class="img2" src="./Images/dice-1.jpg"></img>
</div>
<div class="main-hero3">
<img onclick="nextImg3()" class="img3" src="./Images/dice-2.jpg"></img>
</div>
<div class="main-hero4" >
<img onclick="nextImg4()" class="img4" src="./Images/dice-3.jpg"></img>
</div>
<div class="main-hero5" >
<img onclick="nextImg5()" class="img5" src="./Images/dice-4.jpg"></img>
</div>
<div class="main-hero6" >
<img onclick="nextImg6()" class="img6" src="./Images/dice-5.jpg"></img>
</div>
<div class="pagination">
<span class="numerator" id="numerator">1</span>
<span>/</span>
<span class="denominator">6</span>
</div>
<div class="project-text-grp">
<h3>PROJECT</h3>
<h2>Dice205 Service Illustrations</h2>
<p>A set of illustrations for Dice205 Digital Co. to represent services that the agency provides.</p>
<p>They are currently used for external communication materials for both print and digital to acquire potential clients and recruit potential applicants.</p>
</div>
<div class="sidebar">
<h3>AGENCY</h3>
<h2>Dice205 Digital Co.</h2>
<br>
<h3>ROLE</h3>
<h2>Illustrator</h2>
</div>
<div class="next-button">
<a href="/dice.html" style="text-decoration:none;">
<h3>NEXT PROJECT</h3>
<h2>Job Ad Poster</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})
gsap.to('.main-hero5', {x: -1000, duration: .01})
gsap.to('.main-hero6', {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-hero5', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 5
}
function nextImg5(){
gsap.to('.main-hero5', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero5', {x: -1000, duration: .5, delay: .5, ease: Expo.easeOut})
gsap.to('.main-hero6', {x: 0, opacity: 1, duration: .3, delay: .01, ease: Expo.easeOut})
document.getElementById("numerator").innerHTML = 6
}
function nextImg6(){
gsap.to('.main-hero6', {opacity: 0, duration: .5, ease: Expo.easeOut})
gsap.to('.main-hero6', {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>