Le animazioni attivate dallo scorrimento del mouse (chiamate anche scroll animation) sono un effetto visivo che aggiunge dinamicità e interattività alle pagine web. Queste animazioni si attivano quando l'utente scorre una pagina e possono essere utilizzate per mettere in evidenza contenuti, creare effetti di transizione o semplicemente rendere l'esperienza utente più coinvolgente.
Animazioni personalizzate attivabili allo scorrimento del mouse con HTML e CSS
In questa guida capiremo come creare semplici animazioni attivate dallo scorrimento utilizzando HTML e CSS. Inoltre, verrà introdotto l'utilizzo della libreria AOS (Animate On Scroll), che semplifica l'implementazione di questi effetti senza dover scrivere JavaScript personalizzato.
Requisiti e linguaggi: HTML e CSS
Prima di iniziare è necessario specificare che per la realizzazione del risultato finale è consigliabile avere una conoscenza di base di:
- HTML: per la struttura della pagina e l'inserimento del contenuto.
- CSS: per lo stile grafico e la gestione delle animazioni.
Come specificato, grazie all'utilizzo della libreria AOS è possibile ottenere un risultato semplice, dinamico ed efficace. Senza l'utilizzo di codice JavaScript personalizzato.
Prima di iniziare con la spiegazione dettagliata dei procedimenti necessari, mostriamo il risultato finale che si vuole ottenere. Una pagina con una schermata iniziale di presentazione del contenuto e una successiva sezione che presenta diversi contenitori. Ciascuno con un effetto di animazione personalizzato che si abilita allo scorrimento del mouse.
Di seguito l'anteprima del risultato:
Struttura della pagina e contenuto con HTML
Innanzitutto, si deve creare la struttura principale della pagina HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina di esempio</title>
<link href=https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<link rel="stylesheet" href="styles.css">
</head>Questa sezione mostra le proprietà che vengono assegnate alla pagina. In particolare i tag </link> e </script> richiamano la libreria AOS, quella che permetterà di inserire le animazioni allo scorrimento. Successivamente si prosegue con la creazione del body, ovvero il corpo della pagina HTML. Quest'ultima sarà suddivisa in due parti.
Presentazione della pagina
La prima parte è la presentazione della pagina, viene mostrata al caricamento ed è la prima sezione visibile all'utente; questa viene creata con il seguente codice:
<body>
<div class="main-section">
<div class="content">
<h1>Benvenuto nella pagina</h1>
<h3>Qui troverai effetti di animazione allo scorrimento del mouse</h3>
</div>
<div class="scroll-down">
<p>Scorri in basso</p>
<div class="arrow">↓</div>
</div>
</div>
</body>Il codice presenta un div principale a cui viene assegnata la classe main-section e al suo interno altri due contenitori. Il primo per le scritte mostrate al centro della pagina, il secondo per la scritta in basso che invita l'utente a scorrere la pagina con l'aggiunta dell'icona di una freccia.
I contenitori delle animazioni
La seconda parte della pagina, invece, è dedicata interamente alle animazioni. Qui vengono mostrati 4 div che conterranno ognuno un testo personalizzato. Ciascun contenitore compare nella pagina con un'animazione diversa. Il codice HTML per la seconda parte della pagina è il seguente:
<div class="animazioni">
<div class="box" style="background-color: firebrick;" data-aos="fade-up">Contenuto 1</div>
<div class="box" style="background-color: cadetblue;" data-aos="fade-right">Contenuto 2</div>
<div class="box" style="background-color: seagreen;" data-aos="zoom-in-right">Contenuto 3</div>
<div class="box" style="background-color: darksalmon;" data-aos="flip-up">Contenuto 4</div>
</div>
Il contenuto dei </div> è interamente personalizzabile, Per comodità e facilità di spiegazione si è scelto di inserire una sola scritta che identifichi il contenitore.
Come si può notare, ciascun div presenta, oltre ad un colore di sfondo identificativo, un attributo data-aos che consiste nel tipo di animazione che si sceglie di assegnare. L'esempio sopra raffigurato mostra 4 tipi di animazioni diverse, la libreria AOS ha un elenco molto ampio e garantisce una vasta scelta tra numerose animazioni.
La libreria AOS per HTML e CSS
Prima di passare alla personalizzazione grafica con il linguaggio CSS, è importante introdurre la libreria AOS, come precedentemente anticipato. Questa dev'essere inizializzata tramite uno script da aggiungere prima della chiusura del tag </body>:
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>Questo script permette di inizializzare la libreria e prepararla all'inserimento delle animazioni, inoltre aggiunge due proprietà molto importanti: il tipo di animazione che si vuole assegnare e la durata (in millisecondi).
Personalizzazione grafica tramite CSS
Per poter dare un aspetto più accattivante alla pagina bisogna creare un file styles.css da collegare alla pagina HTML precedentemente strutturata. Al suo interno, come prima cosa, si assegnano le caratteristiche al body:
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}Partendo poi dalla prima parte della pagina, ovvero la schermata iniziale, si aggiungono le proprietà stilistiche del contenitore principale:
.main-section {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #3498db;
height: 100vh;
text-align: center;
color: white;
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.scroll-down {
padding-bottom: 20px;
text-align: center;
font-size: 1.2em;
}
.scroll-down .arrow {
font-size: 2em;
animation: bounce 2s infinite;
}Il contenitore principale viene posizionato tramite la proprietà display: flex e viene esteso per un'altezza massima che equivale all'altezza esatta dello schermo in cui è visualizzato tramite la proprietà height: 100vh. Inoltre il suo contenuto viene centrato e al suo sfondo viene assegnato un colore azzurro.
Viene centrato anche il testo di benvenuto, mentre il testo in fondo alla pagina presenterà un padding-bottom di 20px ovvero un rientro dal basso.
L'effetto di rimbalzo
L'icona della freccia presenta una semplice animazione che crea un effetto di rimbalzo della durata di 2 secondi con un loop infinito. Per poter creare quest'animazione di rimbalzo infinita da assegnare alla freccia vengono utilizzati i cosiddetti keyframes:
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}Animazioni e contenitori
La seconda parte della pagina è interamente dedicata alle animazioni, ovvero ai 4 contenitori colorati:
.animazioni {
display: flex;
flex-direction: column;
align-items: center;
}
.box {
width: 300px;
height: 300px;
background-color: #3498db;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
transition: all 0.2s ease-out;
}
.box.show {
opacity: 1;
transform: translateY(0);
}Le proprietà di ciascun box si concentrano prevalentemente sul loro posizionamento all'interno del contenitore principale seguendo un ordinamento in colonna. Inoltre ciascun box ha una larghezza e un'altezza di 300px e il contenuto al loro interno (ovvero il testo) viene centrato orizzontalmente e verticalmente.
Il gioco è fatto! Ebbene sì, al resto penserà la libreria AOS inizializzata precedentemente. Il suo compito sarà quello di assegnare l'animazione scelta nei tag data-aos di ciascun box e, tramite lo script inserito in fondo alla pagina, impostare una durata e un effetto comune.
Personalizzazione con HTML e CSS e conclusione
La guida mostra su HTML e CSS un procedimento standard affinché possano essere chiari i passaggi da seguire per ottenere un risultato semplice, efficiente e bello da vedere.
Esistono però numerose animazioni offerte dalla libreria AOS. Quindi ci sono ampi margini di miglioramento e di personalizzazione per poter raggiungere risultati diversi. Questo tipo di animazioni può migliorare significativamente l'esperienza utente, rendendo le pagine web più dinamiche e coinvolgenti.
