index.html
· 5.1 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DVD Video</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#screen {
width: 100%;
height: 100%;
position: relative;
}
#dvd-logo {
position: absolute;
width: 187.75px;
height: 84.5px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
/* svg {
width: 291.18px;
height: 136.31px;
} */
</style>
</head>
<body>
<div id="screen">
<div id="dvd-logo">
<svg width="187.5" height="84.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<g id="svg_5">
<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"/>
<path id="text" fill="#000" 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"/>
</g>
</g>
</svg>
</div>
</div>
<script>
const screen = document.getElementById('screen');
const logo = document.getElementById('dvd-logo');
const logoPaths = document.querySelectorAll('path');
let x = Math.random() * (screen.clientWidth - logo.clientWidth);
let y = Math.random() * (screen.clientHeight - logo.clientHeight);
const speeds = [
{ dx: 1.2, dy: 1.2 },
{ dx: 2.0, dy: 2.0 },
{ dx: 2.2, dy: 2.2 }
];
let currentSpeedIndex = 1;
let dx = speeds[currentSpeedIndex].dx / 2;
let dy = speeds[currentSpeedIndex].dy / 2;
function changeColor() {
const r = Math.floor(Math.random() * 156) + 100;
const g = Math.floor(Math.random() * 156) + 100;
const b = Math.floor(Math.random() * 156) + 100;
const color = `rgb(${r}, ${g}, ${b})`;
logoPaths.forEach(path => {
if (path.id !== 'text') {
path.setAttribute('fill', color);
}
});
}
function changeSpeed() {
let newSpeedIndex;
do {
newSpeedIndex = Math.floor(Math.random() * speeds.length);
} while (newSpeedIndex === currentSpeedIndex);
currentSpeedIndex = newSpeedIndex;
const dirX = dx > 0 ? 1 : -1;
const dirY = dy > 0 ? 1 : -1;
dx = speeds[currentSpeedIndex].dx * dirX;
dy = speeds[currentSpeedIndex].dy * dirY;
}
changeColor();
let bounceCount = 0;
function animate() {
x += dx;
y += dy;
let collision = false;
if (x <= 0 || x + logo.clientWidth >= screen.clientWidth) {
dx = -dx;
collision = true;
}
if (y <= 0 || y + logo.clientHeight >= screen.clientHeight) {
dy = -dy;
collision = true;
}
if (collision) {
changeColor();
bounceCount++;
if (bounceCount >= 3 + Math.floor(Math.random() * 3)) {
changeSpeed();
bounceCount = 0;
}
}
logo.style.left = x + 'px';
logo.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', function() {
if (x + logo.clientWidth > screen.clientWidth) {
x = screen.clientWidth - logo.clientWidth;
}
if (y + logo.clientHeight > screen.clientHeight) {
y = screen.clientHeight - logo.clientHeight;
}
});
</script>
</body>
</html>
| 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 | } |
| 19 | |
| 20 | #screen { |
| 21 | width: 100%; |
| 22 | height: 100%; |
| 23 | position: relative; |
| 24 | } |
| 25 | |
| 26 | #dvd-logo { |
| 27 | position: absolute; |
| 28 | width: 187.75px; |
| 29 | height: 84.5px; |
| 30 | display: flex; |
| 31 | justify-content: center; |
| 32 | align-items: center; |
| 33 | user-select: none; |
| 34 | } |
| 35 | |
| 36 | /* svg { |
| 37 | width: 291.18px; |
| 38 | height: 136.31px; |
| 39 | } */ |
| 40 | </style> |
| 41 | </head> |
| 42 | <body> |
| 43 | <div id="screen"> |
| 44 | <div id="dvd-logo"> |
| 45 | <svg width="187.5" height="84.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> |
| 46 | <g class="layer"> |
| 47 | <g id="svg_5"> |
| 48 | <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"/> |
| 49 | <path id="text" fill="#000" 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"/> |
| 50 | </g> |
| 51 | </g> |
| 52 | </svg> |
| 53 | </div> |
| 54 | </div> |
| 55 | |
| 56 | <script> |
| 57 | const screen = document.getElementById('screen'); |
| 58 | const logo = document.getElementById('dvd-logo'); |
| 59 | const logoPaths = document.querySelectorAll('path'); |
| 60 | |
| 61 | let x = Math.random() * (screen.clientWidth - logo.clientWidth); |
| 62 | let y = Math.random() * (screen.clientHeight - logo.clientHeight); |
| 63 | |
| 64 | const speeds = [ |
| 65 | { dx: 1.2, dy: 1.2 }, |
| 66 | { dx: 2.0, dy: 2.0 }, |
| 67 | { dx: 2.2, dy: 2.2 } |
| 68 | ]; |
| 69 | |
| 70 | let currentSpeedIndex = 1; |
| 71 | let dx = speeds[currentSpeedIndex].dx / 2; |
| 72 | let dy = speeds[currentSpeedIndex].dy / 2; |
| 73 | |
| 74 | function changeColor() { |
| 75 | const r = Math.floor(Math.random() * 156) + 100; |
| 76 | const g = Math.floor(Math.random() * 156) + 100; |
| 77 | const b = Math.floor(Math.random() * 156) + 100; |
| 78 | const color = `rgb(${r}, ${g}, ${b})`; |
| 79 | |
| 80 | logoPaths.forEach(path => { |
| 81 | if (path.id !== 'text') { |
| 82 | path.setAttribute('fill', color); |
| 83 | } |
| 84 | }); |
| 85 | } |
| 86 | |
| 87 | function changeSpeed() { |
| 88 | let newSpeedIndex; |
| 89 | do { |
| 90 | newSpeedIndex = Math.floor(Math.random() * speeds.length); |
| 91 | } while (newSpeedIndex === currentSpeedIndex); |
| 92 | |
| 93 | currentSpeedIndex = newSpeedIndex; |
| 94 | |
| 95 | const dirX = dx > 0 ? 1 : -1; |
| 96 | const dirY = dy > 0 ? 1 : -1; |
| 97 | |
| 98 | dx = speeds[currentSpeedIndex].dx * dirX; |
| 99 | dy = speeds[currentSpeedIndex].dy * dirY; |
| 100 | } |
| 101 | |
| 102 | changeColor(); |
| 103 | |
| 104 | let bounceCount = 0; |
| 105 | |
| 106 | function animate() { |
| 107 | x += dx; |
| 108 | y += dy; |
| 109 | |
| 110 | let collision = false; |
| 111 | |
| 112 | if (x <= 0 || x + logo.clientWidth >= screen.clientWidth) { |
| 113 | dx = -dx; |
| 114 | collision = true; |
| 115 | } |
| 116 | |
| 117 | if (y <= 0 || y + logo.clientHeight >= screen.clientHeight) { |
| 118 | dy = -dy; |
| 119 | collision = true; |
| 120 | } |
| 121 | |
| 122 | if (collision) { |
| 123 | changeColor(); |
| 124 | bounceCount++; |
| 125 | |
| 126 | if (bounceCount >= 3 + Math.floor(Math.random() * 3)) { |
| 127 | changeSpeed(); |
| 128 | bounceCount = 0; |
| 129 | } |
| 130 | } |
| 131 | |
| 132 | logo.style.left = x + 'px'; |
| 133 | logo.style.top = y + 'px'; |
| 134 | |
| 135 | requestAnimationFrame(animate); |
| 136 | } |
| 137 | |
| 138 | animate(); |
| 139 | |
| 140 | window.addEventListener('resize', function() { |
| 141 | if (x + logo.clientWidth > screen.clientWidth) { |
| 142 | x = screen.clientWidth - logo.clientWidth; |
| 143 | } |
| 144 | if (y + logo.clientHeight > screen.clientHeight) { |
| 145 | y = screen.clientHeight - logo.clientHeight; |
| 146 | } |
| 147 | }); |
| 148 | </script> |
| 149 | </body> |
| 150 | </html> |
| 151 |