Animazioni scroll CSS

Cosa sono le animazioni scroll CSS?

Le animazioni CSS sullo scrolling sono elementi in grado di rendere l’interazione tra utente e sito web molto più fluida e scorrevole, oltre che accattivante. Infatti, sono degli effetti visivi che si attivano (e si trasformano) durante lo scorrimento di una pagina web.

Ti è mai capitato di visitare un sito web e notare, sulla homepage per esempio, un carosello fatto di immagini che scorrono da un lato all’altro dello schermo? Ecco, questo è una chiara spiegazione di cosa sono le animazioni CSS sullo scrolling.

Più in generale, queste possono includere transizioni fluide, effetti parallax e animazioni di elementi che appaiono o scompaiono in base alla posizione dello scroll.

Perché usare animazioni scroll in CSS?

L’uso di animazioni CSS offre diversi vantaggi, contribuendo all’offerta di una user experience più intuitiva e fluida. Basta pensare che nel momento in cui l’utente scorre una pagina, un’animazione CSS ben fatta può mettere in risalto elementi chiave, come titoli, immagini o call-to-action.

Questo, ovviamente, può generare diversi vantaggi. Primo tra tutti: miglioramento dell’engagement, in quanto gli effetti che si attivano al variare dello scroll mantengono viva l’attenzione dell’utente, rendendo la navigazione meno monotona e più interattiva.

Inoltre, le animazioni scroll CSS - quando applichiamo effetti come il fade in - guidano lo sguardo dell'utente verso sezioni importanti, semplificando il percorso visivo tra i vari contenuti.

La scelta di applicare questi effetti visivi al proprio sito può risultare vantaggiosa anche dal punto di vista dell’identità e della riconoscibilità. Scegliendo delle animazioni scroll CSS che riflettono la brand identity della nostra azienda, infatti, possiamo distinguere il nostro sito web dalla concorrenza.

Infine, un altro vantaggio delle animazioni scroll CSS riguarda la creazione di gerarchie visive chiare che facilitano l’interazione e rendono il contenuto accessibile a un vasto pubblico.

Bisogna ricordare l’importanza di prediligere animazioni discrete, così da organizzare le informazioni in modo chiaro e strategico e migliorare l’accessibilità. Un esempio riguarda la riduzione del carico cognitivo con l’uso di animazioni scroll che appaiono gradualmente e, quindi, l’utente non viene sovraccaricato da un’eccessiva quantità di informazioni.

In sintesi, le animazioni scroll CSS sono un ottimo strumento per rendere un sito intuitivo e facile da esplorare, oltre ad essere validi alleati per coloro che hanno compreso l’importanza di tematiche come l’accessibilità web.

Come funzionano le animazioni scroll CSS

Abbiamo compreso cosa sono e le ragioni per le quali le animazioni scroll CSS sono vantaggiose. Ora vogliamo capire come funzionano questi CSS scroll, in quanto ci sono due modalità tra cui poter scegliere:

• CSS puro: alcuni effetti possono essere applicati direttamente utilizzando proprietà come transform, opacity e position appartenenti al CSS puro. In questo caso, è importante chiarire che il CSS in sé offre capacità limitate per gestire eventi come lo scroll;

• Javascript e Intersection Observer: per creare animazioni più avanzate, si può ricorrere a JavaScript insieme a CSS. Ad esempio, l’API di JS Intersection Observer è uno strumento abbastanza potente per le animazioni scroll, poiché permette di rilevare quando un elemento entra o esce dall’area visibile, attivando animazioni in base alla posizione nello scroll.

Scopriamo, adesso, alcuni degli effetti di scorrimento più popolari da poter applicare al proprio sito web e conferirgli un aspetto del tutto nuovo!

Effetti di scorrimento CSS popolari

Ecco un breve elenco delle animazioni CSS scroll più popolari. Ovviamente, si tratta di effetti facilmente personalizzabili in modo che si adattino al meglio al proprio sito web e all’idea di design che si vuole realizzare!

Parallax scrolling con CSS

Iniziamo dal parallax scrolling: un effetto che crea l’illusione di profondità facendo muovere lo sfondo a una velocità diversa rispetto al contenuto in primo piano. In breve, è come se si creasse un effetto 3D, tipico dei design moderni e molto apprezzato dal pubblico del web.

Con CSS, possiamo ottenere il parallax scrolling impostando background-attachment: fixed; sullo sfondo e usando transform per controllare la velocità di movimento degli elementi.

Qui un esempio di CSS:

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h2 {
  font-size: 8vw; /* Scales font size with viewport width */
}

.background-block {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100%;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax {
  background-image: url("https://images.unsplash.com/photo-1558985040-ed4d5029dd50?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzODkxNjg&ixlib=rb-1.2.1&q=80"); 
}

.parallax1 {
  background-image: url("https://images.unsplash.com/photo-1610128114197-485d933885c5?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTA2Nzc&ixlib=rb-1.2.1&q=80");
}

.parallax2 {
  background-image: url("https://images.unsplash.com/photo-1562095241-8c6714fd4178?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTA5OTg&ixlib=rb-1.2.1&q=80");
}

.parallax3 {
  background-image: url("https://images.unsplash.com/photo-1543722530-d2c3201371e7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTExOTg&ixlib=rb-1.2.1&q=80");
}

.text-block p {
  padding: 75px; /* Inner padding for spacing */
  font-size: 22px;
  line-height: 1.6; /* For improved readability */
}

Effetti di fade-in e fade-out

C’è poi l’effetto di fade-in che fa apparire lentamente un elemento dallo stato di trasparenza, mentre il fade-out lo fa scomparire in modo graduale.

Questi effetti sono molto utili per mettere in primo piano testi, immagini o sezioni in un modo che catturi l'attenzione dell’utente ma senza essere troppo invasivi.

Qui un esempio di codice in CSS per l'effetto fade-in:

/* Animation */
/* Fade In */
.fade-in {
  animation-name: fade-in;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade Out */
.fade-out {
  animation-name: fade-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(3);
  }

  to {
    opacity: 0;
    transform: scale(0);
  }
}

/* Fade in while moving to upper right */
.fade-in-to-upper-right {
  animation-name: fade-in-to-upper-right;
}

@keyframes fade-in-to-upper-right {
  from {
    opacity: 0;
    top: 350px;
    left: 0px;
    scale: 0;
  }

  to {
    opacity: 1;
    top: 0px;
    left: 350px;
    scale: 1;
  }
}

/* Fade in and out while moving to lower right */
.fade-in-out-to-lower-right {
  animation-name: fade-in-out-to-lower-right;
}

@keyframes fade-in-out-to-lower-right {
  from {
    opacity: 0;
    top: 400px;
    left: 0px;
    scale: 0;
  }
  50% {
    opacity: 1;
    top: 150px;
    left: 150px;
    scale: 2;
  }

  to {
    opacity: 0;
    top: 400px;
    left: 400px;
    scale: 0;
  }
}

/**************************************/
/* Color, Body and Container Settings */
/**************************************/
/* Center shapes */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Set light gray border */
.container {
  width: 500px;
  height: 500px;
  border: 5px solid lightgray;
  background: #5b55a1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1px;
  margin: 5px;
}

/* Shape */
.circle {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #36b1bd;
  border-radius: 50%;
  animation-duration: 3s;
  /* animation-iteration-count: 3; */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Animazioni scroll per immagini

Infine, ci sono animazioni scroll per le immagini: sicuramente degli elementi impattanti per un utente che visita un sito web.

Possiamo applicare effetti di scorrimento per farle apparire gradualmente, ridimensionarle o spostarle leggermente, creando un impatto visivo unico. Ad esempio, con CSS possiamo utilizzare scale e translate per far muovere le immagini o aumentare le loro dimensioni mentre appaiono sullo schermo.

Qui un esempio di codice in CSS:

.wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 30px; 
}

img {
  max-width: 100%;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.2s ease-out;
}

.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: #fff;
  transition: opacity 0.3s ease-out;
}

.container {
  padding: 50px 0;
}

Qui, invece, il codice in JS:

window.addEventListener('scroll', function() {
  const wraps = document.querySelectorAll('.wrap');
  const scrollPosition = window.scrollY;

  wraps.forEach(wrap => {
    const image = wrap.querySelector('img');
    const caption = wrap.querySelector('.caption');
    const imageTop = wrap.offsetTop;
    
    if (scrollPosition + window.innerHeight > imageTop) {
      const scale = 1 + (scrollPosition + window.innerHeight - imageTop) * 0.001;
      image.style.transform = `scale(${scale})`;
      caption.style.opacity = 1; 
    } else {
      image.style.transform = 'scale(1)';
      caption.style.opacity = 0;
    }
  });
});

Quali sono gli errori da evitare con le animazioni scroll CSS?

Le animazioni scroll CSS sono sicuramente degli elementi che possono offrire valore aggiunto al design del proprio sito web. Se utilizzate in modo scorretto, il risultato finale potrebbe rivelarsi l’opposto di quello desiderato.

Dunque? Ecco qui una breve lista di errori da evitare con le animazioni scroll CSS:

• eccesso di animazioni: è importante capire che troppe animazioni possono appesantire una pagina, rallentandone il caricamento o producendo effetti poco piacevoli sull’UX;

• animazioni troppo veloci/lente: gli effetti devono essere fluidi e ben bilanciati, altrimenti possono rendere la navigazione frustrante e aumentare il tasso di abbandono;

• scarsa compatibilità con i browser: alcuni effetti CSS non sono supportati da tutti i browser, ragione per cui è sempre bene testare le animazioni sui browser più usati e creare fallback per garantire la compatibilità.

Come sfruttare al meglio le animazioni scroll CSS: considerazioni finali

Le animazioni sullo scrolling CSS rappresentano un’opportunità preziosa per migliorare l’esperienza utente, arricchire il design e dare al proprio sito web un tocco dinamico e personalizzato.

Le best practices da ricordare quando si applicano animazioni CSS le abbiamo descritte nel paragrafo precedente. Questo perché, oggi, ogni volta che ci interfacciamo con lo sviluppo web, dobbiamo ricordare l’importanza di due principi: l’accessibilità e l’esperienza utente.

Prima di concludere, vi ricordiamo sempre di testare e ottimizzare le animazioni CSS sui vari dispositivi e browser per esser certi che, in qualsiasi caso, tutti possano godere di un’esperienza di qualità!