AOS (Animate On Scroll) Bibliothek: Animationen ganz einfach anpassen

Für eine schöne, interaktive Website brauchst du kein schweres Framework. Mit sauberem HTML, modernem CSS
und einem leichten Helfer wie AOS (Animate On Scroll) lieferst du schnelle, ansprechende Seiten
mit Premium-Gefühl—ohne aufgeblähten Code. Wie viele Seiten siehst du täglich, die statisch und flach wirken?
Stell dir deine Startseite vor: Schon ein dezentes Fade, eine weiche Rotation oder ein spielerisches
Slide-In lässt dein Design sofort herausstechen. Besucher spüren, dass die Site lebendig und responsiv ist—
genau solche Details stoppen den Scroll und lenken Aufmerksamkeit.

Ein Hauch scrollgesteuerter Animation verändert die Wahrnehmung grundlegend. Plötzlich wirkt das Layout
bedacht und modern; die Marke polierter; und Inhalte bekommen Rhythmus und Flow statt nur Block auf Block.
Das Beste: AOS ist leichtgewichtig, super einfach zu installieren und erfordert kein großes JS-Framework.
Es ist eines dieser Tools, bei denen zehn Minuten nach wochenlanger Motion-Arbeit aussehen.

Fühlt sich deine Website im Vergleich zur Konkurrenz noch „festgefahren“ an, ist das dein Low-Hanging-Fruit.
Bau AOS ein, experimentiere mit ein paar Effekten und erlebe, wie Portfolio, Blog oder Shop rasch
hochwertiger wirken. Fordere dich heraus: Liefere nicht nur Information—liefere ein Erlebnis.

Add CSS to your website header

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks