52 lines
2.3 KiB
HTML
52 lines
2.3 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="Content-Security-Policy"
|
||
content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'" />
|
||
<title>AeroMC</title>
|
||
<style>
|
||
html, body { margin: 0; height: 100%; overflow: hidden; background: transparent; }
|
||
#bild {
|
||
position: absolute; display: none; transform-origin: 0 0; will-change: transform, opacity;
|
||
border-radius: 6px; box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<img id="bild" alt="" />
|
||
<script>
|
||
// Hilfsfenster für "Fenster wachsen aus dem Knopf" (siehe fensteraufbau.js) – wird nach einmaligem Gebrauch geschlossen
|
||
const bild = document.getElementById('bild');
|
||
let start = 1;
|
||
|
||
// Bild an die Zielstelle legen und auf Knopfgröße zusammenschrumpfen (noch unsichtbar)
|
||
window.vorbereiten = (adresse, nach, von) => new Promise((fertig) => {
|
||
bild.onerror = () => fertig(false);
|
||
bild.onload = () => {
|
||
Object.assign(bild.style, { left: nach.x + 'px', top: nach.y + 'px', width: nach.width + 'px', height: nach.height + 'px' });
|
||
// wächst aus der Mitte des angeklickten Knopfs heraus (darf außerhalb liegen)
|
||
bild.style.transformOrigin = `${von.x + von.width / 2 - nach.x}px ${von.y + von.height / 2 - nach.y}px`;
|
||
start = Math.max(0.06, Math.min(0.5, Math.max(von.width / nach.width, von.height / nach.height)));
|
||
bild.style.transform = `scale(${start})`;
|
||
bild.style.opacity = '0';
|
||
bild.style.display = 'block';
|
||
// zwei Bildtakte abwarten, damit der Anfangszustand gezeichnet ist (höchstens 120 ms)
|
||
let erledigt = false;
|
||
const fertigEinmal = () => { if (!erledigt) { erledigt = true; fertig(true); } };
|
||
requestAnimationFrame(() => requestAnimationFrame(fertigEinmal));
|
||
setTimeout(fertigEinmal, 120);
|
||
};
|
||
bild.src = adresse;
|
||
});
|
||
|
||
window.abspielen = (ms) => bild.animate([
|
||
{ transform: `scale(${start})`, opacity: 0 },
|
||
{ opacity: 1, offset: 0.3 },
|
||
{ transform: 'scale(1)', opacity: 1 },
|
||
], { duration: ms, easing: 'cubic-bezier(.2, .8, .2, 1)', fill: 'forwards' }).finished.then(() => true, () => false);
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|