jQuery Advanced Example

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Collision Symphony</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: #111;
        }
        .example-container {
            position: relative;
            width: 90%;
            max-width: 800px;
            margin-top: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .moving-element {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
        #element1 {
            background-color: #ff6b81;
            left: 0;
            top: 30%;
            animation-name: moveLeftRight1;
            box-shadow: 0 0 20px rgba(255, 107, 129, 0.7);
        }
        #element2 {
            background-color: #51bfd3;
            left: 0;
            top: 30%;
            animation-name: moveRightLeft2;
            box-shadow: 0 0 20px rgba(81, 191, 211, 0.7);
        }
        @keyframes moveLeftRight1 {
            0% { left: 0; transform: scale(0.5); }
            25% { left: calc(25% - 12.5px); transform: scale(2); }
            45% { left: calc(50% - 50px); transform: scale(1); }
            55% { left: calc(50% - 50px); transform: scale(1); }
            75% { left: calc(25% - 12.5px); transform: scale(2); }
            100% { left: 0; transform: scale(0.5); }
        }
        @keyframes moveRightLeft2 {
            0% { left: calc(100% - 50px); transform: scale(0.5); }
            25% { left: calc(75% - 37.5px); transform: scale(2); }
            45% { left: calc(50% ); transform: scale(1); }
            55% { left: calc(50% ); transform: scale(1); }
            75% { left: calc(75% - 37.5px); transform: scale(2); }
            100% { left: calc(100% - 50px); transform: scale(0.5); }
        }
        .controls {
            display: flex;
            align-items: center;
            margin-top: 180px;
            width: 100%;
            justify-content: center;
            flex-direction: row;
        }
        .control-button {
            width: 60px;
            height: 30px;
            border-radius: 8px;
            background-color: #4aed82;
            color: #111;
            font-size: 24px;
            cursor: pointer;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease;
            line-height: 0;
            margin: 0 10px;
        }
        .control-button:hover {
            background-color: #38a361;
            transform: scale(1.1);
        }
        .control-button:active {
            background-color: #2a7d47;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            transform: scale(0.9);
        }
        #resetButton {
            width: 150px;
            height: 30px;
            border-radius: 25px;
            background-color: #f94144;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #resetButton:hover {
            background-color: #c72e31;
            transform: scale(1.05);
        }
        #resetButton:active {
            background-color: #9b2226;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            transform: scale(0.95);
        }
        .label {
            color: #fff;
            font-size: 12px;
            text-align: center;
            display: block;
            margin-top: 5px;
        }
        .control-label {
            font-size: 12px;
            text-align: center;
            display: block;
            margin-top: 5px;
        }
        .control-heading{
            color: #fff;
            margin-bottom: 20px;
            font-size: 24px;
        }
        #speedDisplay {
            width: 150px;
            height: 30px;
            border-radius: 8px;
            border: 2px solid #fff;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <h1 class="control-heading">Dynamic Collision Symphony</h1>
    <div class="example-container">
        <div class="moving-element" id="element1"></div>
        <div class="moving-element" id="element2"></div>
        <div class="controls">
            <button class="control-button" id="decreaseSpeed">-</button>
            <div id="speedDisplay">Speed: 100</div>
            <button class="control-button" id="increaseSpeed">+</button>
            <button class="control-button" id="resetButton">↶ Reset</button>
        </div>
    </div>
    <script>
        $(document).ready(function () {
			let speed = 100;
			let intervalId;

			const $speedDisplay = $('#speedDisplay');
			const $increaseSpeedButton = $('#increaseSpeed');
			const $decreaseSpeedButton = $('#decreaseSpeed');
			const $resetButton = $('#resetButton');
			const $element1 = $('#element1');
			const $element2 = $('#element2');

			function updateSpeedDisplay() {
				$speedDisplay.text(`Speed: ${speed}`);
			}

			function updateAnimationSpeed() {
				const animationSpeed = 1000 - speed + 100;
				const duration = `${animationSpeed / 1000}s`;
				$element1.css('animation-duration', duration);
				$element2.css('animation-duration', duration);
			}

			function increaseSpeed() {
				speed += 50;
				if (speed > 1000) speed = 1000;
				updateSpeedDisplay();
				updateAnimationSpeed();
			}

			function decreaseSpeed() {
				speed -= 50;
				if (speed < -1000) speed = -1000;
				updateSpeedDisplay();
				updateAnimationSpeed();
			}

			$increaseSpeedButton.on('mousedown', function () {
				intervalId = setInterval(increaseSpeed, 100);
			});

			$increaseSpeedButton.on('mouseup mouseleave', function () {
				clearInterval(intervalId);
			});

			$decreaseSpeedButton.on('mousedown', function () {
				intervalId = setInterval(decreaseSpeed, 100);
			});

			$decreaseSpeedButton.on('mouseup mouseleave', function () {
				clearInterval(intervalId);
			});

			$resetButton.on('click', function () {
				speed = 100;
				updateSpeedDisplay();
				updateAnimationSpeed();
			});

			updateSpeedDisplay(); // Initial setup
			updateAnimationSpeed();
		});

    </script>
</body>
</html>