Bounce

Bounce

HTML

<section>
	    <h2 id="text"></h2>
    </section>

CSS

{
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
			
        }
        section {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #1F69FA;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        section h2 {
            font-size: 10em;
            color: #333;
            margin: 0 auto;
            text-align: center;
            font-family: consolas;
        }
		.btn1 {
		    background-color: #1F69FA;
		}
        section spawn {
            position: absolute;
            bottom: -80px;
            background: transparent;
            border-radius: 50%;
            pointer-events: none;
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
            animation: animate 4s linear infinite;
        }

        section spawn:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            transform: scale(0.25) translate(-70%, -70%);
            background: radial-gradient(#fff, transparent);
            opacity: 0.6;
            border-radius: 50%;
        }

        @keyframes animate {
            0% {
                transform: translateY(0%);
                opacity: 1;
            }
            99% {
                opacity: 1;
            }
            100% {
                transform: translateY(-2000%);
                opacity: 0;
            }
        section span {
            margin-top: 700px;
            font-size: 1em;
            color: #333;
            margin: 0 auto;
            font-family: consolas;
            background-color: #1F69FA;
            border: none;
            position: absolute;
        }
		*{ margin:0; padding:0; }
        html, body { width:100%; height:100%; }
       ...

JavaScript

function Seifenblasen_blasen(){
		    document.getElementById("text").innerHTML = "Bubble";
		    const section = document.querySelector('section')
		    const createElement = document.createElement('spawn')
			var size = Math.random() * 60;
			createElement.style.width = 30 + size + 'px';
			createElement.style.height = 30 + size + 'px';
			createElement.style.left = Math.random() * innerWidth + "px";
			section.appendChild(createElement);
			
			setTimeout(() => {
			    createElement.remove()
			},8000)
			
		}
	    const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
		
		document.addEventListener("click", next);
		
		function next() {
		    
		    document.body.innerHTML="";
			clearInterval(Blaseninterval);
			(function() {
                var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
                window.requestAnimationFrame = requestAnimationFrame;
            })();

            canvas = document.createElement('canvas');
            canvas.id = 'screen';
            document.body.appendChild(canvas);
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            var canvas = document.getElementById('screen');
            var screenWidth = canvas.width;
            var screenHeight = canvas.height;
            var ctx = canvas.getContext("2d");
            var fps = 144;
            var interval = 1000/fps;
            var lastTime = (new Date()).getTime();
            var currentTime = 0;
            var delta = 0;
     
            function mainLoop() {
                window.requestAnimationFrame(mainLoop);

                currentTime = (new Date()).getTime();
                delta = (currentTime - lastTime);

                if (delta > interval) {
                    ctx.fillStyle = "#1F69FA";
                    ctx.fillRect(0, 0, screenWidth, screenHeight);
    ...