Beispiel:JS-WAAPI-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1.0">

<title>WAAPI - 2</title> <style> 

 body {
   font-family: sans-serif;
 }

.card { width: 18em; aspect-ratio: 3 / 5; padding: 1em; border: thin solid green; 

 border-radius: 0.5em;
 background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Ocimum_basilicum_CG_NBG_LR.jpg/960px-Ocimum_basilicum_CG_NBG_LR.jpg");
 background-size: cover;
 background-position: center;
 position: relative;
 overflow: hidden;

} .card header, .card-teaser, .card-details { 

     background: rgb(255 255 255 /0.2);
     backdrop-filter: blur(6px);

} .card .icon { float: right; } dl { display: grid; grid-template-columns: min-content 1fr; } 

 button {
   padding: 0.5rem 1rem;
   font-size: 1rem;
   cursor: pointer;
 }

</style> </head> <body>

Animierte Kräuterkarten

<header>

Basilikum🌱

</header>

Ein aromatisches Küchenkraut, perfekt für Pasta, Salate und Pesto. 

 <button class="toggle" aria-expanded="false">Mehr erfahren</button> 
 <section class="card-details" hidden>

Pflegehinweise

Standort
Hell, aber keine direkte Mittagssonne
Wasser
Gleichmäßig feucht halten
Temperatur
18–25 °C
Tipp
Regelmäßig ernten, fördert buschiges Wachstum
 </section>

<button id="playBtn">Los</button> <button id="pauseBtn">Pause</button> <button id="reverseBtn">Zurück</button>


<script> const card = document.querySelector(".card"); const toggleBtn = document.querySelector(".toggle"); const details = document.querySelector(".card-details"); const teaser = document.querySelector(".card-teaser");

const playBtn = document.querySelector("#playBtn"); const pauseBtn = document.querySelector("#pauseBtn"); const reverseBtn = document.querySelector("#reverseBtn");

// Make details animatable (but initially invisible) details.hidden = false;

// --- Teaser animation (fade out & lift slightly) const teaserAnimation = teaser.animate( 

 [
   { opacity: 1, translate: "0 0"  },
   { opacity: 0, translate: "0 -1em" }
 ],
 {
   duration: 300,
   easing: "ease",
   fill: "both"
 }

);

teaserAnimation.pause();

// --- Details animation (fade in & rise) const detailsAnimation = details.animate( 

 [
   { opacity: 0, translate: "0 1em" },
   { opacity: 1, translate: "0 0" }
 ],
 {
   duration: 300,
   easing: "ease",
   fill: "both",
   delay: 150
 }

);

detailsAnimation.pause();

// --- Optional: background emphasis (nice but subtle) const backgroundAnimation = card.animate( 

 [
   { filter: "brightness(1)" },
   { filter: "brightness(0.85)" }
 ],
 {
   duration: 300,
   easing: "ease",
   fill: "both"
 }

);

backgroundAnimation.pause();

function playAll() { 

 teaserAnimation.play();
 detailsAnimation.play();
 backgroundAnimation.play();

}

function pauseAll() { 

 teaserAnimation.pause();
 detailsAnimation.pause();
 backgroundAnimation.pause();

}

function reverseAll() { 

 teaserAnimation.reverse();
 detailsAnimation.reverse();
 backgroundAnimation.reverse();

}

toggleBtn.addEventListener("click", () => { 

 const expanded = toggleBtn.getAttribute("aria-expanded") === "true";

 toggleBtn.setAttribute("aria-expanded", String(!expanded));
 toggleBtn.textContent = expanded ? "Mehr erfahren" : "Weniger anzeigen";

 expanded ? reverseAll() : playAll();

});

// --- Demo controls playBtn.addEventListener("click", playAll); pauseBtn.addEventListener("click", pauseAll); reverseBtn.addEventListener("click", reverseAll);


</script>

</body> </html>

Abgerufen am 6.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:JS-WAAPI-2.html"