lion/android-app-persistence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create animation in javascript

Browse source
This commit is contained in:
Alexander Mahr 2024-12-26 09:11:22 +01:00
parent f817f61876
commit 911170325e
1 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/assets/index.html
View file

@ -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>