☰

Useless Things Series: Classic DVD Logo

Adds move to a random position on hover and changes the color on the corner hit with 21 colors to change from.

// ==UserScript==
// @name Useless Things Series: Classic DVD Logo
// @version 1.4
// @description Adds move to a random position on hover and changes the color on the corner hit with 21 colors to change from.
// @match *://*/*
// @match http://*/*
// @match https://*/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1126616
// @author Original Author: Useless Things Series:?? , Co-author: 1x1x1 aka UnknownQwertyz
// ==/UserScript==

(function() {
    'use strict';

    // helps animation possible
    const dvdAnimation = {
        dvdLogo: document.createElement('div'),
        containerWidth: window.innerWidth,
        containerHeight: window.innerHeight,
        x: 0,
        y: 0,
        dx: 3,
        dy: 3,

        images: [
            'https://i.ibb.co/BBkFmwK/dvdlogo-01.png',
            'https://i.ibb.co/GP6qcDb/dvdlogo-02.png',
            'https://i.ibb.co/QYG8Lzr/dvdlogo-03.png',
            'https://i.ibb.co/bWMQvFx/dvdlogo-04.png',
            'https://i.ibb.co/dLVrN6r/dvdlogo-05.png',
            'https://i.ibb.co/kJFZxpk/dvdlogo-06.png',
            'https://i.ibb.co/QrhnfTF/dvdlogo-07.png',
            'https://i.ibb.co/tMPGdJj/dvdlogo-08.png',
            'https://i.ibb.co/f2RDDyV/dvdlogo-09.png',
            'https://i.ibb.co/kq0p5TT/dvdlogo-10.png',
            'https://i.ibb.co/fXL06T8/dvdlogo-11.png',
            'https://i.ibb.co/xH52XPW/dvdlogo-12.png',
            'https://i.ibb.co/njL7hzs/dvdlogo-13.png',
            'https://i.ibb.co/1GPx3Mf/dvdlogo-14.png',
            'https://i.ibb.co/T0GBZ1R/dvdlogo-15.png',
            'https://i.ibb.co/pPgRdwx/dvdlogo-16.png',
            'https://i.ibb.co/fpCwPfm/dvdlogo-17.png',
            'https://i.ibb.co/YNHWMnH/dvdlogo-18.png',
            'https://i.ibb.co/R9C2XLG/dvdlogo-19.png',
            'https://i.ibb.co/d7pwDMK/dvdlogo-20.png',
            'https://i.ibb.co/6Fzpmcz/dvdlogo-21.png'
          ],
        currentImageIndex: 0,

        initialize: function() {
            this.dvdLogo.style.width = '150px'; // Adjust the width
            this.dvdLogo.style.height = '100px'; // Adjust the height
            this.dvdLogo.style.position = 'fixed';
            this.dvdLogo.style.backgroundSize = 'contain'; // Use 'contain' instead of 'cover'
            this.dvdLogo.style.backgroundRepeat = 'no-repeat'; // Ensure no repetition
            this.dvdLogo.style.zIndex = '9999'; // Set a high z-index value

            document.body.appendChild(this.dvdLogo);

            this.containerWidth = window.innerWidth;
            this.containerHeight = window.innerHeight;

            // Add hover event
            this.dvdLogo.addEventListener('mouseover', this.moveToRandomPosition.bind(this));
            this.dvdLogo.style.pointerEvents = 'auto';

            this.changeImage();
        },

        // makes movement possible using 'px'
        moveLogo: function() {
            this.x += this.dx;
            this.y += this.dy;

            if (this.x + this.dvdLogo.clientWidth >= this.containerWidth || this.x <= 0) {
                this.dx = -this.dx;
                this.changeImage(); 
            }
            if (this.y + this.dvdLogo.clientHeight >= this.containerHeight || this.y <= 0) {
                this.dy = -this.dy;
                this.changeImage(); 
            }

            this.dvdLogo.style.left = this.x + 'px';
            this.dvdLogo.style.top = this.y + 'px';
        },
        // mechanic that changes the background image
        changeImage: function() {
            this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
            this.dvdLogo.style.backgroundImage = 'url("' + this.images[this.currentImageIndex] + '")';
        },
        // mechanic that adds "move to random position" on hover
        moveToRandomPosition: function() {
            this.x = Math.floor(Math.random() * (this.containerWidth - this.dvdLogo.clientWidth));
            this.y = Math.floor(Math.random() * (this.containerHeight - this.dvdLogo.clientHeight));
            this.changeImage();
        }
    };

    // function that helps the movement possible
    function animate() {
        dvdAnimation.moveLogo();
        requestAnimationFrame(animate);
    }

    dvdAnimation.initialize();
    animate();
})();