Libreria AOS (Animate On Scroll): personalizzare le animazioni è semplice

Non serve un framework pesante per creare un sito bello e interattivo. Con HTML pulito, CSS moderno
e un aiuto leggero come AOS (Animate On Scroll), pubblichi pagine rapide e coinvolgenti
con un tocco premium senza gonfiare il codice. Quanti siti vedi ogni giorno statici e piatti?
Immagina la tua homepage: un leggero fade, una rotazione morbida o uno slide-in giocoso
fanno subito la differenza. Il visitatore percepisce un sito vivo e reattivo—quel piccolo dettaglio
che ferma lo scroll e cattura l’attenzione.

Aggiungere un pizzico di animazioni al scroll cambia completamente la percezione. All’improvviso,
il layout appare intenzionale e moderno; il brand più curato; e i contenuti hanno ritmo e fluidità
invece di ammucchiarsi in blocchi. La parte migliore? AOS è leggero, facilissimo da installare
e non richiede imparare un grande framework JS. È uno di quegli strumenti in cui
dieci minuti sembrano settimane di motion design su misura.

Se il tuo sito appare ancora “bloccato” rispetto ai concorrenti, questa è la leva più semplice.
Integra AOS, prova un paio di animazioni e scoprirai quanto rapidamente portfolio, blog o store
acquistano un feeling premium. Metti alla prova te stesso: offri non solo informazione—ma un’esperienza memorabile.

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