-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
128 lines (112 loc) · 3.51 KB
/
gallery.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
<html>
<head>
<style>
.panels {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
}
.panel{
display: flex;
flex-direction: column;
flex: 1;
justify-content:center;
background-repeat: no-repeat;
background-size: cover;
font-size: 3em;
-webkit-text-fill-color: aliceblue;
font-family: cursive;
transition:
font-size 0.7s cubic-bezier(0.51,-0.19, 0.7,-0.11),
flex 0.7s cubic-bezier(0.51,-0.19, 0.7,-0.11),
background 0.24s;
background-position: center;
}
.panel > *{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.5s;
font-size: 1em;
flex: 1;
}
.panel1{
background-image:url("1.jpeg");
}
.panel2{
background-image:url("2.jfif");
}
.panel3{
background-image:url("3.jpeg");
}
.panel4{
background-image:url("4.jpeg");
}
.panel5{
background-image:url("5.jpeg");
}
.panel.click{
flex: 5;
font-size: 5em;
}
.panel.stay > *:first-child{
transform: translateY(0);
}
.panel.stay > *:last-child{
transform: translateY(0);
}
.panel > *:first-child{
transform: translateY(-100%);
}
.panel > *:last-child{
transform: translateY(100%);
}
</style>
<title>
</title>
</head>
<body>
<div class="panels">
<div class="panel panel1">
<p >HELLO</p>
<p >STAY</p>
<p>POSETIVE</p>
</div>
<div class="panel panel2">
<p>THANK</p>
<p>ME</p>
<p>LATER</p>
</div>
<div class="panel panel3">
<p>BRING</p>
<p>IT</p>
<p>BACK</p>
</div>
<div class="panel panel4">
<p>TAKE</p>
<p>MY</p>
<p>LEAD</p>
</div>
<div class="panel panel5">
<p>DO</p>
<p>IT</p>
<p>NOW</p>
</div>
</div>
</body>
<script>
var ele=document.querySelectorAll('.panel') ;
function toggleclick(){
this.classList.toggle('click');
}
function togglestay(e){
this.classList.toggle('stay');
}
ele.forEach(panel => panel.addEventListener('click',toggleclick));
ele.forEach(panel => panel.addEventListener('click',togglestay));
</script>
</html>