AOS (Animate On Scroll) bibliotheek: animaties aanpassen wordt eenvoudig

Voor een mooie, interactieve site heb je geen zwaar framework nodig. Met schone HTML, moderne CSS
en een lichtgewicht helper zoals AOS (Animate On Scroll) lever je snelle, aantrekkelijke pagina’s
met een premium gevoel—zonder je codebasis op te blazen. Hoeveel sites bekijk je dagelijks die statisch en vlak zijn?
Stel je jouw homepage voor: een subtiele fade, een zachte rotatie of een speelse slide-in
laten je ontwerp direct opvallen. De bezoeker ervaart de site als levendig en responsief—precies die kleine
details die het scrollen doen stoppen.

Een tikje scroll-animatie verandert de perceptie volledig. Plots voelt je layout intentioneel en modern; je merk
oogt verfijnder; en je content krijgt ritme en flow in plaats van stapeling in blokken. Het mooiste?
AOS is licht, super eenvoudig te installeren en vereist geen groot JS-framework. Het is zo’n tool waarbij
tien minuten werk aanvoelen als weken aan maatwerk motion design.

Voelt je site nog “vast” vergeleken met concurrenten, pak dan deze quick win. Voeg AOS toe, experimenteer
met een paar animaties en merk hoe je portfolio, blog of shop snel premium aanvoelt. Daag jezelf uit:
geef bezoekers meer dan informatie—geef ze een ervaring om te onthouden.

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