با CSS (و لمس جاوا اسکریپت) یک انیمیشن تصویر شبکه ای به تمام صفحه بسازید

در این آموزش، یک افکت حرکتی را به شما نشان می‌دهم که در آن یک طرح شبکه‌ای تصویر تقسیم‌شده به یک تصویر تمام صفحه تبدیل می‌شود.

1	<section class="section-text">...</section>
2
3	<!--IMPORTANT SECTION-->
4	<section>
5	<div class="grid">
6	<div class="col col-1">
7	<figure>
8	<img src="castle1-unsplash.jpg" alt="Lake Bled, Bled, Slovenia">
9	<figcaption>Lake Bled, Bled, Slovenia</figcaption>
10	</figure>
11	</div>
12	<div class="col col-2">
13	<figure>
14	<img src="castle2-unsplash.jpg" alt="Schloss Neuschwanstein, Neuschwansteinstraße, Schwangau, Deutschland">
15	<figcaption>Schloss Neuschwanstein, Schwangau, Deutschland</figcaption>
16	</figure>
17	</div>
18	<div class="col col-3">
19	<figure>
20	<img src="castle3-unsplash.jpg" alt="Isola di Capo Passero, Italia">
21	<figcaption>Isola di Capo Passero, Italia</figcaption>
22	</figure>
23	</div>
24	<div class="col col-4">
25	<figure>
26	<img src="castle4-unsplash.jpg" alt="Eilean Donan Castle, Dornie, United Kingdom">
27	<figcaption>Eilean Donan Castle, Dornie, United Kingdom</figcaption>
28	</figure>
29	</div>
30	</div>
31	</section>
32
33	<section class="section-text">...</section>

1	.grid {
2	position: relative;
3	display: grid;
4	height: 100vh;
5	}
6
7	.grid::before,
8	.grid::after {
9	content: "";
10	position: absolute;
11	background: #333;
12	z-index: 1;
13	}
14
15	.grid::before {
16	top: 0;
17	left: 50%;
18	width: 1px;
19	height: 100%;
20	}
21
22	.grid::after {
23	top: 50%;
24	left: 0;
25	width: 100%;
26	height: 1px;
27	}
28
29	.grid .col {
30	position: relative;
31	grid-area: 1/1;
32	cursor: pointer;
33	transition: clip-path 0.5s;
34	}
35
36	.grid .col-1 {
37	clip-path: inset(0 50% 50% 0);
38	}
39
40	.grid .col-2 {
41	clip-path: inset(0 0 50% 50%);
42	}
43
44	.grid .col-3 {
45	clip-path: inset(50% 50% 0 0);
46	}
47
48	.grid .col-4 {
49	clip-path: inset(50% 0 0 50%);
50	}
51
52	.grid .col figure {
53	position: absolute;
54	top: 0;
55	left: 0;
56	width: 50%;
57	height: 50%;
58	margin: 0;
59	transition: all 0.5s;
60	}
61
62	.grid .col-2 figure {
63	left: 50%;
64	}
65
66	.grid .col-3 figure {
67	top: 50%;
68	}
69
70	.grid .col-4 figure {
71	top: 50%;
72	left: 50%;
73	}
74
75	.grid .col img {
76	width: 100%;
77	height: 100%;
78	object-fit: cover;
79	object-position: top;
80	}
81
82	.grid .col figcaption {
83	position: absolute;
84	bottom: 20px;
85	left: 50%;
86	transform: translateX(-50%);
87	padding: 6px 12px;
88	border-radius: 5px;
89	width: max-content;
90	max-width: 95%;
91	line-height: 1;
92	color: white;
93	background: #ff0054;
94	text-align: center;
95	opacity: 0;
96	transition-property: opacity;
97	}

1	const cols = document.querySelectorAll(".grid .col");
2	const CLASS1 = "animate-col";
3	const CLASS2 = "animate-caption";
4
5	cols.forEach(function (col) {
6	col.addEventListener("click", function () {
7	this.classList.toggle(CLASS1);
8	if (this.classList.contains(CLASS2)) {
9	this.classList.remove(CLASS2);
10	}
11	});
12
13	col.addEventListener("transitionstart", function () {
14	this.style.zIndex = 2;
15	});
16
17	col.addEventListener("transitionend", function () {
18	if (col.classList.contains(CLASS1)) {
19	col.classList.add(CLASS2);
20	} else {
21	col.style.zIndex = "auto";
22	}
23	});
24	});

1	.grid .col {
2	transition: clip-path 0.5s;
3	}
4
5	.grid .col figure {
6	transition: all 0.5s;
7	}
8
9	.grid .col figcaption {
10	transition-property: opacity;
11	}
12
13	.grid .col.animate-col {
14	clip-path: inset(0);
15	}
16
17	.grid .col.animate-col figure {
18	top: 0;
19	left: 0;
20	width: 100%;
21	height: 100%;
22	}
23
24	.grid .col.animate-caption figcaption {
25	opacity: 1;
26	transition-duration: 0.3s;
27	}

1. با نشانه گذاری HTML شروع کنید