HTML/CSS/JS Sections einfliegen lassen?
Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.
Eine section sieht so aus:
<section>
<h2>Titel</h2>
<div>Text und andere Elemente</div>
</section>
CSS:
section {
max-width: 960px;
margin: 0 auto;
padding: 2rem;
animation: text 3s 1;
}
@media (max-width: 1012px) {
section {
width: 90%;
}
}
3 Antworten
Die Bewegung eines Elements von links nach rechts kannst du mit einer CSS-Animation lösen:
.fade-from-left {
animation: move-from-left 2s forwards;
}
@keyframes move-from-left {
0% {
transform: translateX(-150px);
}
100% {
transform: translateX(50px);
}
}
Die Werte habe ich hier nur zufällig gewählt. Ändere sie so, wie es für dich am besten passt. Als zuzügliche Referenz hilft MDN.
Da diese Animation aber erst durch ein Scrollereignis ausgelöst werden soll, benötigst du JavaScript. Du könntest jede Sektion, die von links ins Bild hineinbewegt werden soll, mit einem data-Attribut oder einer Klasse markieren.
<section data-fade-in><!-- ... --></section>
All diese Elemente holst du dir und beobachtest sie mit einem Intersection Observer. Sobald eines in den Viewport gerät, fügst du diesem die fade-from-left-Klasse hinzu.
Das könnte ungefähr so aussehen:
const observer = new IntersectionObserver(triggerFadeIn, {
rootMargin: '0px',
threshold: 0.5
});
function triggerFadeIn(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("fade-from-left");
}
});
};
document.querySelectorAll("[data-fade-in]").forEach(item => observer.observe(item));
Gibt es auch in "fertig", z.B.:
https://michalsnik.github.io/aos/
Maximale Erfolge!
Ohne Code kann dir hier keiner helfen. Wäre gut, wenn du deinen Lösungsansatz uns mitteilst
Bruh, lies doch mal den Titel der Frage
Und vor allem in was es Programmiert werden soll