Skip to content

Commit 3369eec

Browse files
feynoltfeynolt
committed
First Commit
First Commit Description
1 parent 18841d3 commit 3369eec

3 files changed

Lines changed: 269 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dynamic Frame Layout</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="controls">
12+
<label>
13+
<input type="checkbox" id="showFrames"> Show Frames
14+
</label>
15+
<label>
16+
<input type="checkbox" id="autoplayAll" checked> Autoplay All
17+
</label>
18+
</div>
19+
<div class="grid" id="grid"></div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>
24+

‎script.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
const frames = [
2+
{
3+
id: 1,
4+
video: "https://static.cdn-luma.com/files/981e483f71aa764b/Company%20Thing%20Exported.mp4",
5+
corner: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_corner_update.png",
6+
edgeHorizontal: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_vert_update.png",
7+
edgeVertical: "https://static.cdn-luma.com/files/bcf576df9c38b05f/1_hori_update.png",
8+
},
9+
{
10+
id: 2,
11+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/WebGL%20Exported%20(1).mp4",
12+
corner: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_corner_update.png",
13+
edgeHorizontal: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_vert_update.png",
14+
edgeVertical: "https://static.cdn-luma.com/files/bcf576df9c38b05f/2_hori_update.png",
15+
},
16+
{
17+
id: 3,
18+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Jitter%20Exported%20Poster.mp4",
19+
corner: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_Corner_update.png",
20+
edgeHorizontal: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_hori_update.png",
21+
edgeVertical: "https://static.cdn-luma.com/files/3d36d1e0dba2476c/3_Vert_update.png",
22+
},
23+
{
24+
id: 4,
25+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Exported%20Web%20Video.mp4",
26+
corner: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_corner_update.png",
27+
edgeHorizontal: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_hori_update.png",
28+
edgeVertical: "https://static.cdn-luma.com/files/9e67e05f37e52522/4_vert_update.png",
29+
},
30+
{
31+
id: 5,
32+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Logo%20Exported.mp4",
33+
corner: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_corner_update.png",
34+
edgeHorizontal: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_hori_update.png",
35+
edgeVertical: "https://static.cdn-luma.com/files/9e67e05f37e52522/5_verti_update.png",
36+
},
37+
{
38+
id: 6,
39+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Animation%20Exported%20(4).mp4",
40+
corner: "https://static.cdn-luma.com/files/1199340587e8da1d/6_corner.png",
41+
edgeHorizontal: "https://static.cdn-luma.com/files/1199340587e8da1d/6_corner-1.png",
42+
edgeVertical: "https://static.cdn-luma.com/files/1199340587e8da1d/6_vert.png",
43+
},
44+
{
45+
id: 7,
46+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Illustration%20Exported%20(1).mp4",
47+
corner: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_corner.png",
48+
edgeHorizontal: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_hori.png",
49+
edgeVertical: "https://static.cdn-luma.com/files/b80b5aa00ccc33bd/7_vert.png",
50+
},
51+
{
52+
id: 8,
53+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Art%20Direction%20Exported.mp4",
54+
corner: "https://static.cdn-luma.com/files/981e483f71aa764b/8_corner.png",
55+
edgeHorizontal: "https://static.cdn-luma.com/files/981e483f71aa764b/8_hori.png",
56+
edgeVertical: "https://static.cdn-luma.com/files/981e483f71aa764b/8_verticle.png",
57+
},
58+
{
59+
id: 9,
60+
video: "https://static.cdn-luma.com/files/58ab7363888153e3/Product%20Video.mp4",
61+
corner: "https://static.cdn-luma.com/files/981e483f71aa764b/9_corner.png",
62+
edgeHorizontal: "https://static.cdn-luma.com/files/981e483f71aa764b/9_hori.png",
63+
edgeVertical: "https://static.cdn-luma.com/files/981e483f71aa764b/9_vert.png",
64+
},
65+
]
66+
67+
const grid = document.getElementById("grid")
68+
const showFramesCheckbox = document.getElementById("showFrames")
69+
const autoplayAllCheckbox = document.getElementById("autoplayAll")
70+
71+
function createFrame(frame) {
72+
const frameElement = document.createElement("div")
73+
frameElement.className = "frame"
74+
frameElement.innerHTML = `
75+
<video src="${frame.video}" loop muted ${autoplayAllCheckbox.checked ? "autoplay" : ""}>
76+
<div class="frame-border">
77+
<img src="${frame.corner}" class="corner-tl">
78+
<img src="${frame.corner}" class="corner-tr">
79+
<img src="${frame.corner}" class="corner-bl">
80+
<img src="${frame.corner}" class="corner-br">
81+
<div class="edge-top" style="background-image: url(${frame.edgeHorizontal})"></div>
82+
<div class="edge-bottom" style="background-image: url(${frame.edgeHorizontal})"></div>
83+
<div class="edge-left" style="background-image: url(${frame.edgeVertical})"></div>
84+
<div class="edge-right" style="background-image: url(${frame.edgeVertical})"></div>
85+
</div>
86+
`
87+
88+
const video = frameElement.querySelector("video")
89+
const frameBorder = frameElement.querySelector(".frame-border")
90+
91+
frameElement.addEventListener("mouseenter", () => {
92+
frameElement.style.transform = "scale(1.1)"
93+
if (!autoplayAllCheckbox.checked) {
94+
video.play()
95+
}
96+
if (showFramesCheckbox.checked) {
97+
frameBorder.style.opacity = "1"
98+
}
99+
})
100+
101+
frameElement.addEventListener("mouseleave", () => {
102+
frameElement.style.transform = "scale(1)"
103+
if (!autoplayAllCheckbox.checked) {
104+
video.pause()
105+
}
106+
frameBorder.style.opacity = "0"
107+
})
108+
109+
return frameElement
110+
}
111+
112+
function initializeGrid() {
113+
grid.innerHTML = ""
114+
frames.forEach((frame) => {
115+
const frameElement = createFrame(frame)
116+
grid.appendChild(frameElement)
117+
})
118+
}
119+
120+
showFramesCheckbox.addEventListener("change", () => {
121+
const frameBorders = document.querySelectorAll(".frame-border")
122+
frameBorders.forEach((border) => {
123+
border.style.opacity = showFramesCheckbox.checked ? "1" : "0"
124+
})
125+
})
126+
127+
autoplayAllCheckbox.addEventListener("change", () => {
128+
const videos = document.querySelectorAll("video")
129+
videos.forEach((video) => {
130+
if (autoplayAllCheckbox.checked) {
131+
video.play()
132+
} else {
133+
video.pause()
134+
}
135+
})
136+
})
137+
138+
initializeGrid()
139+

‎styles.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #141414;
4+
color: #ffffff;
5+
margin: 0;
6+
padding: 20px;
7+
}
8+
9+
.container {
10+
max-width: 1200px;
11+
margin: 0 auto;
12+
}
13+
14+
.controls {
15+
margin-bottom: 20px;
16+
}
17+
18+
.grid {
19+
display: grid;
20+
grid-template-columns: repeat(3, 1fr);
21+
grid-template-rows: repeat(3, 1fr);
22+
gap: 10px;
23+
aspect-ratio: 1 / 1;
24+
}
25+
26+
.frame {
27+
position: relative;
28+
overflow: hidden;
29+
transition: all 0.3s ease;
30+
}
31+
32+
.frame video {
33+
width: 100%;
34+
height: 100%;
35+
object-fit: cover;
36+
}
37+
38+
.frame-border {
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
right: 0;
43+
bottom: 0;
44+
pointer-events: none;
45+
opacity: 0;
46+
transition: opacity 0.3s ease;
47+
}
48+
49+
.frame-border img {
50+
position: absolute;
51+
width: 20px;
52+
height: 20px;
53+
}
54+
55+
.frame-border .corner-tl {
56+
top: 0;
57+
left: 0;
58+
}
59+
.frame-border .corner-tr {
60+
top: 0;
61+
right: 0;
62+
transform: scaleX(-1);
63+
}
64+
.frame-border .corner-bl {
65+
bottom: 0;
66+
left: 0;
67+
transform: scaleY(-1);
68+
}
69+
.frame-border .corner-br {
70+
bottom: 0;
71+
right: 0;
72+
transform: scale(-1);
73+
}
74+
75+
.frame-border .edge-top,
76+
.frame-border .edge-bottom {
77+
left: 20px;
78+
right: 20px;
79+
height: 20px;
80+
background-repeat: repeat-x;
81+
}
82+
83+
.frame-border .edge-top {
84+
top: 0;
85+
}
86+
.frame-border .edge-bottom {
87+
bottom: 0;
88+
transform: rotate(180deg);
89+
}
90+
91+
.frame-border .edge-left,
92+
.frame-border .edge-right {
93+
top: 20px;
94+
bottom: 20px;
95+
width: 20px;
96+
background-repeat: repeat-y;
97+
}
98+
99+
.frame-border .edge-left {
100+
left: 0;
101+
}
102+
.frame-border .edge-right {
103+
right: 0;
104+
transform: scaleX(-1);
105+
}
106+

0 commit comments

Comments
 (0)