mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-24 21:45:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Add a demo for web-animations

Browse source
This commit is contained in:
Matthew Olsson 2024-02-23 09:01:55 -07:00 • committed by Andreas Kling
parent fc62989f1a
commit 83fd28e089
Notes: sideshowbarker 2024-07-17 00:37:23 +09:00
2 changed files with 88 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
Base/res/html/misc/web-animations.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<head>
<style>
.ball-container {
position: absolute;
width: 200px;
height: 400px;
}
.box {
position: absolute;
left: 300px;
width: 200px;
height: 200px;
background-color: blue;
border-radius: 10px;
}
#box1 {
top: 50px;
}
#box2 {
top: 300px;
}
#box3 {
position: absolute;
left: 550px;
width: 200px;
height: 200px;
top: 50px;
overflow: hidden;
}
#box3-inner {
width: 200px;
height: 450px;
background-color: blue;
border-radius: 10px;
}
</style>
</head>
<body>
<svg viewBox="0 0 100 200" class="ball-container">
<circle id="ball0" class="ball" cx="50" cy="50" r="50" fill="rgb(220, 105, 105)"></circle>
<circle id="ball1" class="ball" cx="50" cy="40" r="40" fill="rgb(200, 90, 90)"></circle>
<circle id="ball2" class="ball" cx="50" cy="30" r="30" fill="rgb(180, 75, 75)"></circle>
<circle id="ball3" class="ball" cx="50" cy="20" r="20" fill="rgb(160, 60, 60)"></circle>
<circle id="ball4" class="ball" cx="50" cy="10" r="10" fill="rgb(140, 45, 45)"></circle>
<rect x="0" y="197" width="100" height="3" fill="black"></rect>
</svg>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div id="box3">
<div id="box3-inner"></div>
</div>
<script>
for (let i = 0; i < 5; i++) {
const ball = document.getElementById(`ball${i}`);
ball.animate([
{ transform: "translateY(0px)" },
{ transform: `translateY(${100 + 20 * i}px)` },
{ transform: "translateY(0px)" },
], {
duration: 1000,
iterations: Infinity,
easing: "ease-in-out"
});
}
box1.animate({ backgroundColor: ["red"] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate"
});
box2.animate({ opacity: [0] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate",
});
// Discrete property animation
box3.animate({ overflow: ['visible'] }, {
duration: 2000,
iterations: Infinity,
direction: "alternate",
})
</script>
</body>

1
Base/res/html/misc/welcome.html
View file

@ -203,6 +203,7 @@
<li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
<li><a href="canvas-global-alpha.html">canvas globalAlpha</a></li>
<li><a href="canvas-path2d.html">Path2D</a></li>
<li><a href="web-animations.html">Web Animations</a></li>
<li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
<li><h3>Wasm</h3></li>
<li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>