
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>