From 911170325eca131f2d31c7cb69de38ec0b454d14 Mon Sep 17 00:00:00 2001
From: Alexander Mahr <info@alexmahr.de>
Date: Thu, 26 Dec 2024 09:11:22 +0100
Subject: [PATCH] create animation in javascript

---
 app/assets/index.html | 45 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)
diff --git a/app/assets/index.html b/app/assets/index.html
index 0121371..8cd029d 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -4,7 +4,50 @@
         <meta charset="UTF-8">
         <meta content="width=device-width,initial-scale=1.0" name="viewport">
     </head>
-    <body>
+    <style>
+@keyframes wobble {
+  0% {
+   transform: scale(0.1);
+   /* transform: rotate(-5deg);
+    transform: rotate(5deg);*/
+    opacity:0.0
+  }
+  22% {
+   transform: scale(2.0);
+  /*/  transform: rotate(-5deg);*/
+    opacity:1.0
+  }
+  99% {
+   transform: scale(1.0);
+  /*/  transform: rotate(-5deg);*/
+    opacity:0.0
+  }
+}
+</style>
+    <body style="  background: radial-gradient(#111, #000);">
         <h1> SUPER</h1>
+        <script>
+            var count=0;
+            window.addEventListener("load",()=>{
+                function insert(){
+                    count++;
+                    var h2 = document.createElement("h2");
+                    h2.textContent=" "+ count + ". javascript works"
+                    h2.style.color="#"+Math.random().toString(16).slice(3,9);
+   //                 h2.style.transform="rotate("+((Math.random()*3600)|0)/10+"deg)";
+                    h2.style.fontSize=""+Math.random()*20+"pt";
+                    h2.style.textAlign="center";
+                    h2.style.animation="wobble 5s ease-in-out infinite alternate"
+                    document.body.insertBefore(h2,document.body.children[(document.body.children.length*Math.random())|0])
+//                    h2.scrollIntoView({"behavior":"smooth"});
+                    if(document.body.children.length>15){
+                        document.body.children[(document.body.children.length*Math.random())|0].remove();
+                    }
+                    setTimeout(()=>{window.requestAnimationFrame(insert);},100);
+                    
+                }
+                insert();
+            },false);
+        </script>
     </body>
 </html>
