amedea / assets / css / grid-scroll-animation.css

grid-scroll-animation.css in Amedea – Unique Design Elements for Elementor trunk, at assets/css/grid-scroll-animation.css

347 lines 3.8 KB

Raw Download Zip

1	/*
2
3
4
5	Author : Amedea
6
7	Author URI : https://amedeapro.com
8
9	Author : Moskva Yigit
10
11	Author URI : http://moskvayigit.com
12
13	Version : 0.0.4.7
14
15
16
17	Table of Contents
18
19	- Grid Scroll Animation
20
21
22
23	*/
24
25
26
27	.ki-description{width:100%;}
28
29
30
31	/*----------------------------
32
33	.-- Grid Scroll Animation
34
35	-----------------------------*/
36
37
38
39	, :before, *:after {
40
41	box-sizing: inherit;
42
43	}
44
45
46
47	.grid-scroll-animation {
48
49	overflow: clip;
50
51	--gutter: 2rem;
52
53	}
54
55
56
57	@media (max-width: 600px) {
58
59	.grid-scroll-animation {
60
61	--gutter: 1rem;
62
63	}
64
65	}
66
67
68
69	.grid-scroll-animation__header {
70
71	min-height: 100vh;
72
73	display: grid;
74
75	align-content: center;
76
77	max-width: calc(100% - (2 * var(--gutter)));
78
79	padding-left: 48px;
80
81	text-align: left;
82
83	}
84
85
86
87	.grid-scroll-animation h2 {
88
89	padding-top: 12px;
90
91	}
92
93
94
95	.grid-scroll-animation__fluid {
96
97	font-size: clamp(4rem, 12vw, 12rem);
98
99	line-height: 0.6;
100
101	margin: 0;
102
103	}
104
105
106
107	h2.grid-scroll-animation__fluid {
108
109	font-size: clamp(0.5rem, 2vw, 1.5rem);
110
111	padding-top: 48px;
112
113	}
114
115
116
117	.grid-scroll-animation__content-wrap {
118
119	min-height: 240vh;
120
121	}
122
123
124
125	.grid-scroll-animation__content {
126
127	min-height: 100vh;
128
129	width: 100vw;
130
131	display: flex;
132
133	place-items: center;
134
135	align-content: center;
136
137	position: sticky;
138
139	top: 0;
140
141	overflow: hidden;
142
143	}
144
145
146
147	.grid-scroll-animation__footer {
148
149	min-height: 100vh;
150
151	display: grid;
152
153	place-items: center;
154
155	}
156
157
158
159	.grid-scroll-animation__grid {
160
161	--offset: 0;
162
163	--container-width: 1600px;
164
165	--gap: clamp(10px, 7.35vw, 80px);
166
167
168
169	width: var(--container-width);
170
171	max-width: calc(100% - (2 * var(--gutter)));
172
173	display: grid;
174
175	grid-template-columns: repeat(5, 1fr);
176
177	grid-template-rows: repeat(3, auto);
178
179	gap: var(--gap);
180
181	margin: 0 auto;
182
183	align-content: center;
184
185	position: absolute;
186
187	top: 50%;
188
189	left: 50%;
190
191	translate: -50% -50%;
192
193	}
194
195
196
197	@media (max-width: 600px) {
198
199	.grid-scroll-animation__grid {
200
201	grid-template-columns: repeat(3, 1fr);
202
203	--offset: -1;
204
205	}
206
207
208
209	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(1) {
210
211	display: none;
212
213	}
214
215	}
216
217
218
219	.grid-scroll-animation__grid > .grid-scroll-animation__layer {
220
221	display: grid;
222
223	grid-column: 1 / -1;
224
225	grid-row: 1 / -1;
226
227	grid-template-columns: subgrid;
228
229	grid-template-rows: subgrid;
230
231	}
232
233
234
235	.grid > .grid-scroll-animation__layer:nth-of-type(1) div:nth-of-type(odd) {
236
237	grid-column: 1;
238
239	}
240
241
242
243	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(1) div:nth-of-type(even) {
244
245	grid-column: -2;
246
247	}
248
249
250
251	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(2) div:nth-of-type(odd) {
252
253	grid-column: calc(2 + var(--offset));
254
255	}
256
257
258
259	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(2) div:nth-of-type(even) {
260
261	grid-column: calc(-3 - var(--offset));
262
263	}
264
265
266
267	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(3) div:first-of-type {
268
269	grid-column: calc(3 + var(--offset));
270
271	grid-row: 1;
272
273	}
274
275
276
277	.grid-scroll-animation__grid > .grid-scroll-animation__layer:nth-of-type(3) div:last-of-type {
278
279	grid-column: calc(3 + var(--offset));
280
281	grid-row: -1;
282
283	}
284
285
286
287	.grid-scroll-animation__grid img {
288
289	width: 100%;
290
291	aspect-ratio: 4 / 5;
292
293	object-fit: cover;
294
295	border-radius: 1rem;
296
297	}
298
299
300
301	.grid-scroll-animation__grid .grid-scroll-animation__scaler {
302
303	position: relative;
304
305	grid-area: 2 / calc(3 + var(--offset));
306
307	}
308
309
310
311	.grid-scroll-animation__scaler {
312
313	z-index: 2;
314
315	width: 100%;
316
317	height: 100%;
318
319	position: relative;
320
321
322
323	img {
324
325	position: absolute;
326
327	top: 50%;
328
329	left: 50%;
330
331	translate: -50% -50%;
332
333	object-fit: cover;
334
335	border-radius: 1rem;
336
337	width: 100%;
338
339	height: 100%;
340
341	}
342
343
344
345	}
346
347