HTML/CSS/JS Sections einfliegen lassen?

04.12.2021, 21:02

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

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Programm, HTML
04.12.2021, 21:55

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));
FaTech
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
04.12.2021, 20:59

Ohne Code kann dir hier keiner helfen. Wäre gut, wenn du deinen Lösungsansatz uns mitteilst