Skip to content

Commit 33cfa34

Browse files
author
linyisonger
committed
新的尝试~
1 parent dbb8d8d commit 33cfa34

File tree

4 files changed

+182
-0
lines changed

4 files changed

+182
-0
lines changed

‎102.镜面滑屏.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="./assets/global.css">
9+
<style>
10+
@keyframes v2LeftToRight {
11+
0% {
12+
clip-path: polygon(-15% 0%, 0% 0%, -10% 100%, -25% 100%);
13+
}
14+
15+
100% {
16+
clip-path: polygon(110% 0%, 125% 0%, 115% 100%, 100% 100%);
17+
}
18+
}
19+
20+
@keyframes v2ShadowLeftToRight {
21+
0% {
22+
left: -25%;
23+
}
24+
25+
100% {
26+
left: 100%;
27+
}
28+
}
29+
30+
31+
32+
.container {
33+
position: relative;
34+
display: flex;
35+
width: 100vw;
36+
height: 100vh;
37+
overflow: hidden;
38+
}
39+
40+
.v1,
41+
.v2 {
42+
display: flex;
43+
width: 100%;
44+
height: 100%;
45+
box-sizing: border-box;
46+
background-color: #000;
47+
}
48+
49+
.v1 {
50+
filter: grayscale(100%);
51+
}
52+
53+
.v1::before,
54+
.v1::after {
55+
content: "";
56+
position: absolute;
57+
height: 10vh;
58+
background-color: #000;
59+
top: 0;
60+
right: 0;
61+
left: 0;
62+
z-index: 10;
63+
}
64+
65+
.v1::after {
66+
top: auto;
67+
bottom: 0;
68+
}
69+
70+
.v2 {
71+
clip-path: polygon(-15% 0%, 0% 0%, -10% 100%, -25% 100%);
72+
animation-name: v2LeftToRight;
73+
animation-duration: 3s;
74+
animation-timing-function: ease-in;
75+
animation-iteration-count: infinite;
76+
}
77+
78+
79+
video {
80+
width: 100%;
81+
height: 100%;
82+
object-fit: cover;
83+
}
84+
85+
video::-webkit-media-controls {
86+
display: none !important;
87+
}
88+
89+
video {
90+
pointer-events: none;
91+
}
92+
93+
.v2 {
94+
position: absolute;
95+
left: 0;
96+
top: 0;
97+
}
98+
99+
.v2-shadow {
100+
left: -25%;
101+
position: absolute;
102+
width: 25%;
103+
height: 100%;
104+
background: linear-gradient(-80deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 75%);
105+
transform: scaleX(1.1);
106+
animation-name: v2ShadowLeftToRight;
107+
animation-duration: 3s;
108+
animation-timing-function: ease-in;
109+
animation-iteration-count: infinite;
110+
}
111+
112+
.l2 {
113+
position: absolute;
114+
width: 100%;
115+
height: 100%;
116+
transition: opacity .5s ease;
117+
}
118+
119+
.hide {
120+
opacity: 0;
121+
}
122+
</style>
123+
</head>
124+
125+
<body>
126+
<div class="container">
127+
<div class="v1">
128+
<video muted autoplay class="l1">
129+
<source src="./assets/effects-video/frxxz-p1.mp4">
130+
</video>
131+
<video muted class="l2 hide">
132+
<source src="./assets/effects-video/frxxz-p2.mp4">
133+
</video>
134+
</div>
135+
<div class="v2-shadow"></div>
136+
<div class="v2">
137+
<video muted autoplay class="l1">
138+
<source src="./assets/effects-video/frxxz-p1.mp4">
139+
</video>
140+
<video muted class="l2 hide">
141+
<source src="./assets/effects-video/frxxz-p2.mp4">
142+
</video>
143+
</div>
144+
</div>
145+
146+
<script type="module">
147+
let v1VideoDOM = document.querySelectorAll('.v1 video')
148+
let v2VideoDOM = document.querySelectorAll('.v2 video')
149+
let v2ShadowDOM = document.querySelector(".v2-shadow")
150+
v1VideoDOM.item(0).addEventListener("ended", () => {
151+
v1VideoDOM.item(1).classList.remove('hide')
152+
v1VideoDOM.item(1).play()
153+
})
154+
v2VideoDOM.item(0).addEventListener("ended", () => {
155+
v2VideoDOM.item(1).classList.remove('hide')
156+
v2VideoDOM.item(1).play()
157+
})
158+
159+
v1VideoDOM.item(1).addEventListener("ended", () => {
160+
v1VideoDOM.item(1).classList.add('hide')
161+
v1VideoDOM.item(0).play()
162+
})
163+
v2VideoDOM.item(1).addEventListener("ended", () => {
164+
v2VideoDOM.item(1).classList.add('hide')
165+
v2VideoDOM.item(0).play()
166+
})
167+
168+
169+
function updateV2Shadow() {
170+
const opposite = document.body.clientWidth * .1;
171+
const adjacent = document.body.clientHeight;
172+
const hypotenuse = Math.sqrt(opposite * opposite + adjacent * adjacent);
173+
const angle = Math.round(Math.asin(opposite / hypotenuse) * 180 / Math.PI);
174+
v2ShadowDOM.setAttribute('style', `background: linear-gradient(-${90 - angle}deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 75%);`)
175+
}
176+
window.addEventListener("resize", updateV2Shadow)
177+
updateV2Shadow()
178+
</script>
179+
</body>
180+
181+
</html>

‎assets/effects-video/frxxz-p1.mp4‎

7.9 MB
Binary file not shown.

‎assets/effects-video/frxxz-p2.mp4‎

7.29 MB
Binary file not shown.

‎examples.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,5 +99,6 @@
9999
099.数据对比.html
100100
100.曲面八分屏.html
101101
101.基金收益计算.html
102+
102.镜面滑屏.html
102103
blog.html
103104
index.html

0 commit comments

Comments
 (0)