Hey, ich bin am üben für die Abschlussprüfung... wir haben die von 2016 vorliegen, da gehts drum einen Onepager zu bauen... ich will den bissl dynamischer gestalten und hab vereinzelt css animationen am laufen.. so gut soweit.. ich habe am Anfang ein Heroimage mit 100Vh... wenn ich dann runter scrolle ist die Animation bereits abgespielt ohne dass irgendjemand davon Wind bekommen hat... wie kann ich es angehen dass die Animation abgespielt wird wenn ich die Section erreicht habe ? Das habe ich bisher aber es klappt nicht
HTML
Code
<section id="programm">
<div class="container">
<h1 class="subhead">Programm</h1>
<div class="mt-5 mb-5">
<!-- card-deck-animation entfernen und über JavaScript bei Scrollen Adden ! Unfertiges Script bereits vorhanden ! -->
<div class="card-deck card-deck-animation" id="scrollanimation1">
<div class="card">
<div class="card-body">
<h5 class="card-title">Fachtag von 10 Uhr bis 17 Uhr</h5><br>
<ul>
<li><span class="libold">Markt der Möglichkeiten</span> <br>Wir präsentieren unsere Umwelterfolge –
machen Sie mit!
</li><br>
<li><span class="libold">Faires Frechen</span><br>Podiumsgespräch mit dem Umweltbeauftragten der Stadt
</li><br>
<li><span class="libold">Vor Ort Werksbesichtigung</span><br>und Workshops in kleinen Gruppen
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Abendprogramm ab 19 Uhr</h5><br>
<ul>
<li><span class="libold">Zum guten Schluss</span><br>Kulinarischer und musikalischer Ausklang
</li>
</ul>
</div>
</div>
</div>
</div>
<h5 class="treffpunkt">Treffpunkt: Großer Saal der Packpapp Akademie in Frechen, Gewerbepark am Keramion 5
</h5>
</div>
</section><br>CSS
Code
.card-deck-animation{
animation:carddeck 1.5s forwards;
}
@keyframes carddeck {
from {
transform: translate3d(0,200px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@keyframes treffpunkt {
from{transform:translateX(-1000px); opacity: 0;}
to {transform:translateX(0px); opacity: 1;}
}Javascript
Code
<script>
let scrollanimation1 = document.getElementById("scrollanimation1")
scrollanimation1.addEventListener("scroll", function (e) {
scrollanimation1.classList.add("card-deck-animation")
});
</script>