|
|
| Line 1: |
Line 1: |
| <div id="dvd-logo"> | | <div id="dvd-logo">{{audio|mp3=https://pzwiki.wdka.nl/mw-mediadesign/images/f/f2/WanChaiStation.mp3 |
| <a href="#" title="Click to play audio">DVD</a>
| | |style=width:100%}}</div> |
| </div>
| |
| | |
| <style>
| |
| #dvd-logo {
| |
| position: relative;
| |
| width: 100px;
| |
| height: 50px;
| |
| background-color: #fff;
| |
| color: #000;
| |
| text-align: center;
| |
| line-height: 50px;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| }
| |
| | |
| #dvd-logo a {
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| text-decoration: none;
| |
| color: inherit;
| |
| }
| |
| </style>
| |
| | |
| <script>
| |
| (function() {
| |
| var dvdLogo = document.getElementById('dvd-logo');
| |
| if (!dvdLogo) return;
| |
| | |
| var audioElement = document.createElement('audio');
| |
| audioElement.src = 'https://pzwiki.wdka.nl/mw-mediadesign/path/to/your/audio/file.mp3'; // Update this path
| |
| | |
| var containerWidth = dvdLogo.parentElement.clientWidth - dvdLogo.clientWidth;
| |
| var containerHeight = 300; // Adjust this value as needed
| |
| var x = 0, y = 0;
| |
| var xSpeed = 2, ySpeed = 2;
| |
| | |
| function moveLogo() {
| |
| x += xSpeed;
| |
| y += ySpeed;
| |
| | |
| if (x + dvdLogo.clientWidth > containerWidth || x < 0) {
| |
| xSpeed = -xSpeed;
| |
| changeLogoColor();
| |
| }
| |
| if (y + dvdLogo.clientHeight > containerHeight || y < 0) {
| |
| ySpeed = -ySpeed;
| |
| changeLogoColor();
| |
| }
| |
| | |
| dvdLogo.style.left = x + 'px';
| |
| dvdLogo.style.top = y + 'px';
| |
| | |
| requestAnimationFrame(moveLogo);
| |
| }
| |
| | |
| function changeLogoColor() {
| |
| var randomColor = Math.floor(Math.random()*16777215).toString(16);
| |
| dvdLogo.style.backgroundColor = "#" + randomColor;
| |
| }
| |
| | |
| dvdLogo.addEventListener('click', function(e) {
| |
| e.preventDefault();
| |
| audioElement.currentTime = 0;
| |
| audioElement.play();
| |
| });
| |
| | |
| moveLogo();
| |
| })();
| |
| </script> | |
