Zum Inhalt springen

Totenkopf 11

Bewertung
evt. Farben, Geschindigkeit, Musik, Effekte …

also hier setze ich das jetzt mal von hand zusamen…
Es soll schön OBJEKTorientiert werden 🙂

<style>  form {     border: 1px solid gray;     padding: 20px;   }   .form-element {     border: 1px solid gray;     padding: 10px;     margin-bottom: 10px;   }   input[type=text], input[type=email] {     width: 100%; /* fill the available space */   }
</style>
<button id="manipulate-button">Start
</button>
<form>
	<div class="form-element">
		<label for="text_to_display">Text_to_display:
		</label>
		<input type="text" id="text_to_display" name="text_to_display" value="Stan & Oli roules the world!">
	</div>
	<div class="form-element">   evt. Farben, Geschindigkeit, Musik, Effekte ...
	</div>
</form>

<script>
    // Get the button element
    var button = document.getElementById("manipulate-button");
    // Add click event listener to the button
    button.addEventListener("click", function () {
	    // Speed of the animation (in pixels per frame)
	    speed = -0.4;
		// Get the image element
	    var img = document.getElementsByClassName("wp-image-3251")[0];
	    // Create the SVG element
	    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	    // Set the size and position of the SVG element
	    svg.setAttribute("width", img.width + "px");
	    svg.setAttribute("height", img.height + "px");
	    svg.setAttribute("style", "position:absolute;top:" + img.offsetTop + "px;left:" + img.offsetLeft + "px;");
	    // Create the text element
        var textInput = document.getElementById("text_to_display");
	    var buchstabe = document.createElementNS("http://www.w3.org/2000/svg", "text");
            buchstabe.innerHTML = textInput.value;
		    buchstabe.setAttribute("x", img.width * 0.55);
		    buchstabe.setAttribute("y", img.height * 0.7);
		    buchstabe.setAttribute("text-anchor", "middle");
		    buchstabe.setAttribute("alignment-baseline", "middle");
		    buchstabe.setAttribute("font-size", "30px");
		    buchstabe.setAttribute("fill", "red");


		svg.appendChild(buchstabe);
	    img.parentNode.appendChild(svg);
		// Initial position of the text element
		var xPos = Number(buchstabe.getAttribute("x"));

		// Animation function
		function animateText() {
		    speed = speed + (Math.random() * 0.2) - 0.1 -0.006;
		    // Update the position of the text element
		    xPos += speed;
		    buchstabe.setAttribute("x", xPos);
		    // Check if the text element has reached the left edge of the image
		    if (xPos > img.width) {
		        // Stop the animation
		        return;
	    	}
		    // Request another animation frame
		    requestAnimationFrame(animateText);
		}
		// Start the animation
		animateText();
	}
	);
</script>