SliderVC

1
:root {
2
  --z-distance: $item-width / 7.63;
3
  --from-left: 1;
4
  --mobile-bkp: $mobile-bkp;
5
}
6
*,
7
*::before,
8
*::after {
9
  box-sizing: border-box;
10
}
11
body {
12
  min-height: 100vh;
13
  margin: 0;
14
  padding: 0;
15
  overflow: hidden;
16
  font-family: Lora, serif;
17
  font-size: calc(14px + 0.3vw);
18
}
19
.slider {
20
  width: 100vw;
21
  height: 100vh;
22
  display: flex;
23
  perspective: 1000px;
24
  transform-style: preserve-3d;
25
}
26
.slider::before,
27
.slider::after {
28
  content: "";
29
  left: -1vw;
30
  top: -1vh;
31
  display: block;
32
  position: absolute;
33
  width: 102vw;
34
  height: 102vh;
35
  background-position: center;
36
  background-size: cover;
37
  will-change: opacity;
38
  z-index: -1;
39
  box-shadow: 0 0 0 50vmax hsla(0deg, 50%, 0%, 0.7) inset;
40
}
41
.slider::before {
42
  background-image: var(--img-prev);
43
}
44
.slider::after {
45
  transition: opacity 0.7s;
46
  opacity: 0;
47
  background-image: var(--img-next);
48
}
49
.slider--bg-next::after {
50
  opacity: 1;
51
}
52
.slider__content {
53
  margin: auto;
54
  width: 85vw;
55
  height: 75vw;
56
  max-height: 75vh;
57
  will-change: transform;
58
  transform-style: preserve-3d;
59
  transform: translateZ(var(--z-distance));
60
}
61
.slider__images {
62
  overflow: hidden;
63
  position: absolute;
64
  width: 100%;
65
  height: 100%;
66
  z-index: 0;
67
  box-shadow: 0 0 5em #000;
68
}
69
.slider__images-item {
70
  position: absolute;
71
  top: 0;
72
  left: 0;
73
  height: 100%;
74
  width: 100%;
75
  will-change: transform;
76
  transition-timing-function: ease-in;
77
  visibility: hidden;
78
}
79
.slider__images-item img {
80
  display: block;
81
  position: relative;
82
  left: -1em;
83
  top: -1em;
84
  width: calc(100% + 1em * 2);
85
  height: calc(100% + 1em * 2);
86
  object-fit: cover;
87
  will-change: transform;
88
}
89
.slider__images-item--active {
90
  z-index: 20;
91
  visibility: visible;
92
}
93
.slider__images-item--subactive {
94
  z-index: 15;
95
  visibility: visible;
96
}
97
.slider__images-item--next {
98
  transform: translateX(100%);
99
}
100
.slider__images-item--prev {
101
  transform: translateX(-100%);
102
}
103
.slider__images-item--transit {
104
  transition: transform 0.7s, opacity 0.7s;
105
}
106
.slider__text-item {
107
  padding: 0.5em;
108
}
109
.slider__text-item > * {
110
  overflow: hidden;
111
  position: absolute;
112
}
113
.slider__text-item h3,
114
.slider__text-item p {
115
  transition: transform 0.35s ease-out;
116
  overflow: hidden;
117
}
118
.slider__text-item h3 {
119
  background-color: hsla(0deg, 50%, 100%, 0.5);
120
}
121
.slider__text-item p {
122
  font-family: "Open Sans", sans-serif;
123
  padding: 1em;
124
  color: white;
125
  text-align: center;
126
  background-color: hsla(0deg, 0%, 0%, 0.5);
127
}
128
.slider__text-item h3::before,
129
.slider__text-item p::before {
130
  content: "";
131
  position: absolute;
132
  top: 0;
133
  left: 0;
134
  width: 100%;
135
  height: 100%;
136
  transform: translateX(0);
137
  transition: transform 0.35s ease-out 0.28s;
138
}
139
.slider__text-item h3::before {
140
  background-color: #000;
141
  left: 1px;
142
}
143
.slider__text-item p::before {
144
  background-color: #fff;
145
  left: -1px;
146
}
147
.slider__text-item h3 {
148
  margin: 0;
149
  font-size: 3.5em;
150
  padding: 0 0.3em;
151
  position: relative;
152
  font-weight: 700;
153
  transform: translateX(-100%);
154
}
155
.slider__text-item p {
156
  margin: 0;
157
  transform: translateX(100%);
158
}
159
.slider__text-item-head {
160
  top: -0.5em;
161
  transform: translateZ(3em);
162
}
163
.slider__text-item-info {
164
  bottom: -10px;
165
  right: -10px;
166
  max-width: 75%;
167
  min-width: min-content;
168
  transform: translateZ(2em);
169
}
170
.slider__text-item--active h3,
171
.slider__text-item--active p {
172
  transform: translateX(0);
173
}
174
.slider__text-item--active h3::before {
175
  transform: translateX(100%);
176
}
177
.slider__text-item--active p::before {
178
  transform: translateX(-100%);
179
}
180
.slider__text-item--backwards h3::before,
181
.slider__text-item--backwards p::before {
182
  transition: transform 0.35s ease-in;
183
}
184
.slider__text-item--backwards h3,
185
.slider__text-item--backwards p {
186
  transition: transform 0.35s ease-in 0.35s;
187
}
188
.slider__nav {
189
  position: absolute;
190
  width: 100%;
191
  top: 85%;
192
  text-align: center;
193
}
194
.slider__nav-dots {
195
  margin-top: 5vh;
196
  display: inline-flex;
197
  position: relative;
198
  padding: 1em;
199
}
200
.slider__nav-dots::before {
201
  content: "";
202
  position: absolute;
203
  left: calc(1em + 1em + 2px);
204
  top: calc(1em + 2px);
205
  width: calc(2em - 2px * 2);
206
  height: calc(1em / 2 - 2px * 2);
207
  background-color: hsla(0deg, 50%, 100%, 0.9);
208
  transition: transform 0.7s ease-out;
209
  transform: translateX(calc((2em + 1em * 2) * (var(--from-left) - 1)));
210
}
211
.slider__nav-dot {
212
  margin: 0 1em;
213
  width: 2em;
214
  height: 0.5em;
215
  border: 2px solid hsla(0deg, 50%, 100%, 0.5);
216
}
217
.slider__nav-dot:hover {
218
  border-color: hsla(0deg, 50%, 100%, 0.7);
219
}
220
.slider__nav-dot:active {
221
  border-color: hsla(0deg, 50%, 100%, 0.5);
222
}
223
.slider__move-left {
224
  content: " ";
225
  position: absolute;
226
  z-index: 9;
227
  width: 10vw;
228
  height: 80vw;
229
  max-height: 80vh;
230
  left: 50%;
231
  margin-left: -50%;
232
  top: 10%;
233
  background: transparent;
234
  transition: 1s;
235
  color: transparent;
236
  display: flex;
237
  align-items: center;
238
  justify-content: center;
239
  user-select: none;
240
}
241
.slider__move-left:hover {
242
  color: #8285808c;
243
}
244
.slider__move-right {
245
  position: absolute;
246
  z-index: 9;
247
  width: 10vw;
248
  height: 1000vw;
249
  max-height: 80vh;
250
  left: 90%;
251
  top: 10%;
252
  background: transparent;
253
  transition: 1s;
254
  color: transparent;
255
  display: flex;
256
  align-items: center;
257
  justify-content: center;
258
  user-select: none;
259
}
260
.slider__move-right:hover {
261
  color: #8285808c;
262
}
263