Like 0
Fork 0

Last active 1741293199

Bouncing DVD Video logo with variable speed & color change

index.html Raw
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>DVD Video</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: #000;
12 overflow: hidden;
13 width: 100vw;
14 height: 100vh;
15 display: flex;
16 justify-content: center;
17 align-items: center;
18 cursor: none;
19 }
20
21 #screen {
22 width: 100%;
23 height: 100%;
24 position: relative;
25 }
26
27 #dvd-logo {
28 position: absolute;
29 width: 187.75px;
30 height: 84.5px;
31 display: flex;
32 justify-content: center;
33 align-items: center;
34 user-select: none;
35 }
36 </style>
37</head>
38<body>
39 <div id="screen">
40 <div id="dvd-logo">
41 <svg width="187.5" height="84.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
42 <g class="layer">
43 <g id="svg_5">
44 <path d="m128.98,10.18l18.19,0s22.01,-1.13 21.45,10.16c-0.87,17.47 -27.65,16.23 -27.65,16.23l5.22,-22.72l-18.2,0l-7.62,32.87l18.06,0s18.04,0.81 32.87,-6.35c15.8,-7.61 15.94,-21.02 15.94,-21.02s0.57,-8.46 -7.76,-13.4c-9.28,-5.51 -21.44,-5.93 -21.44,-5.93l-39.79,0l-23.56,30.62l-9.88,-30.62l-68.56,0l-2.54,10.16l18.2,0s22.01,-1.13 21.44,10.16c-0.87,17.47 -27.65,16.23 -27.65,16.23l5.22,-22.72l-18.2,0l-7.62,32.87l18.06,0s18.04,0.81 32.88,-6.35c15.8,-7.61 15.94,-21.02 15.94,-21.02s-0.21,-3.85 -0.71,-5.5c-0.42,-1.41 -0.99,-3.67 -0.99,-3.67l0.85,0l16.79,47.12l41.06,-47.12zm-128.82,59.82c0,-7.01 39.55,-12.7 88.32,-12.7c48.78,0 88.32,5.69 88.32,12.7s-39.54,12.7 -88.32,12.7c-48.77,0 -88.32,-5.69 -88.32,-12.7zm167.69,9.8l-3.63,0l0,0.61l1.44,0l0,3.98l0.76,0l0,-3.98l1.43,0l0,-0.61l0,0zm5.99,0l-1.16,0l-1.35,3.49l-1.37,-3.49l-1.17,0l0,4.59l0.76,0l0,-3.83l0.02,0l1.51,3.83l0.47,0l1.51,-3.83l0.02,0l0,3.83l0.76,0l0,-4.59z" id="svg_3"/>
45 <path id="text" fill="rgba(0,0,0,1)" d="m39.44,63.76l-5.22,0l7.76,13.18l3.73,0l7.88,-13.18l-5.21,0l-4.49,8.01l-4.45,-8.01zm22.4,13.18l4.8,0l0,-13.18l-4.8,0l0,13.18zm14.98,0l6.81,0c5.11,0 9.37,-2.88 9.37,-6.59c0,-3.71 -4.23,-6.6 -9.37,-6.6l-6.81,0l0,13.19zm4.8,-10.28l1.13,0c3.08,0 5.26,1.33 5.26,3.69c0,2.57 -2.45,3.69 -5.31,3.69l-1.08,0l0,-7.38zm31.17,0l0,-2.9l-10.51,0l0,13.18l10.51,0l0,-2.9l-5.71,0l0,-2.27l5.41,0l0,-2.91l-5.41,0l0,-2.2l5.71,0zm19.28,-3.34c-5.31,0 -10.21,2.8 -10.21,6.78c0,4.27 4.29,7.28 10.21,7.28c5.93,0 10.21,-3.01 10.21,-7.28c0,-3.98 -4.89,-6.78 -10.21,-6.78zm0,3.32c2.86,0 5.22,1.66 5.22,3.48c0,2.28 -2.36,3.94 -5.22,3.94c-2.86,0 -5.21,-1.66 -5.21,-3.94c0,-1.82 2.35,-3.48 5.21,-3.48z" fill="#fff" id="svg_4"/>
46 </g>
47 </g>
48 </svg>
49 </div>
50 </div>
51
52 <script>
53 const screen = document.getElementById('screen');
54 const logo = document.getElementById('dvd-logo');
55 const logoPaths = document.querySelectorAll('path');
56
57 let x = Math.random() * (screen.clientWidth - logo.clientWidth);
58 let y = Math.random() * (screen.clientHeight - logo.clientHeight);
59
60 const speeds = [
61 { dx: 1.2, dy: 1.2 },
62 { dx: 2.0, dy: 2.0 },
63 { dx: 2.2, dy: 2.2 }
64 ];
65
66 let currentSpeedIndex = 1;
67 let dx = speeds[currentSpeedIndex].dx / 2;
68 let dy = speeds[currentSpeedIndex].dy / 2;
69
70 function changeColor() {
71 const r = Math.floor(Math.random() * 156) + 100;
72 const g = Math.floor(Math.random() * 156) + 100;
73 const b = Math.floor(Math.random() * 156) + 100;
74 const color = `rgb(${r}, ${g}, ${b})`;
75
76 logoPaths.forEach(path => {
77 if (path.id !== 'text') {
78 path.setAttribute('fill', color);
79 }
80 });
81 }
82
83 function changeSpeed() {
84 let newSpeedIndex;
85 do {
86 newSpeedIndex = Math.floor(Math.random() * speeds.length);
87 } while (newSpeedIndex === currentSpeedIndex);
88
89 currentSpeedIndex = newSpeedIndex;
90
91 const dirX = dx > 0 ? 1 : -1;
92 const dirY = dy > 0 ? 1 : -1;
93
94 dx = speeds[currentSpeedIndex].dx * dirX;
95 dy = speeds[currentSpeedIndex].dy * dirY;
96 }
97
98 changeColor();
99
100 let bounceCount = 0;
101
102 function animate() {
103 x += dx;
104 y += dy;
105
106 let collision = false;
107
108 if (x <= 0 || x + logo.clientWidth >= screen.clientWidth) {
109 dx = -dx;
110 collision = true;
111 }
112
113 if (y <= 0 || y + logo.clientHeight >= screen.clientHeight) {
114 dy = -dy;
115 collision = true;
116 }
117
118 if (collision) {
119 changeColor();
120 bounceCount++;
121
122 if (bounceCount >= 3 + Math.floor(Math.random() * 3)) {
123 changeSpeed();
124 bounceCount = 0;
125 }
126 }
127
128 logo.style.left = x + 'px';
129 logo.style.top = y + 'px';
130
131 requestAnimationFrame(animate);
132 }
133
134 animate();
135
136 window.addEventListener('resize', function() {
137 if (x + logo.clientWidth > screen.clientWidth) {
138 x = screen.clientWidth - logo.clientWidth;
139 }
140 if (y + logo.clientHeight > screen.clientHeight) {
141 y = screen.clientHeight - logo.clientHeight;
142 }
143 });
144 </script>
145</body>
146</html>
147

Powered by Opengist ⋅ Load: 23ms⋅

English