Salta al contenuto
Marco Merlina

Palermo

Lionel Messi · Tributo : Ventun anni di Messi in una pagina che si racconta con lo scroll.

Un sito tributo a Lionel Messi, dal primo anno al Barcellona all’addio alla nazionale del 6 ottobre 2026. Una sola pagina che si scorre come una storia: la figura che torna al 2006 sotto il cursore, la firma che si scrive, i numeri, la sala dei trofei, il Mondiale di Qatar 2022.

Anno
Ottobre 2026
Tipo
Sito web
Cliente
Tributo non ufficiale a Lionel Messi
Commissionato da
Progetto personale
Ruolo
Concept, UX/UI, sviluppo e motion design
Prima schermata di marcomerlina.it/messi, catturata dal vivo

marcomerlina.it/messi · prima schermataDal vivo, 7 ottobre 2026

Il progetto, in breve

Il contesto

È un progetto personale, pubblicato il 7 ottobre 2026, il giorno dopo l’ultima partita di Messi con l’Argentina al Monumental. La storia la conoscono tutti: per questo il racconto doveva passare dal movimento e dalle immagini più che dalle parole.

La soluzione

La pagina si apre con la maglia dell’Argentina disegnata a soli bordi: nome e numero arrivano da punti diversi e si posano esattamente sulla foto. Da lì ogni sezione mostra un capitolo invece di descriverlo, fino al «Gracias por todo, Leo» del finale.

  • Tributo non ufficiale, senza legami con Lionel Messi né con i suoi club.
  • Otto Palloni d’Oro, 47 trofei di squadra, ventun anni con il 10 dell’Argentina (dati al 7 ottobre 2026).
La pagina vera

Tutta la home, dall’alto in basso.

È la home di marcomerlina.it/messi, catturata dal vivo a pagina intera (7 ottobre 2026) e mai ritoccata. Nella cornice la vedi dall’inizio alla fine.

Come è fatto

TRE scelte.

  1. Una figura che cambia età

    Nella prima schermata c’è solo Messi di spalle, scontornato. Passando il mouse, una macchia morbida rivela il Messi del 2006 e l’anno in basso scorre da 2026 a 2006. Gli scontorni li ho fatti con un modello di segmentazione eseguito in locale.

  2. Lo scroll come regia

    Con GSAP, ScrollTrigger e Lenis la prima schermata si chiude in una card, dietro scorre un marquee a due righe e la firma di Messi, ricavata da un vettoriale di pubblico dominio, si scrive alla velocità dello scroll. Le bandiere in 3D, fatte con Three.js, sventolano di più quando si scorre veloce.

  3. Fatti e foto verificati

    I numeri della carriera vengono da fonti controllate, aggiornate al 7 ottobre 2026. Le foto sono di Wikimedia Commons con licenza libera e ogni autore è citato nella pagina dei crediti. Font e librerie stanno sul server: nessuna CDN.

Il risultato

Una pagina sola, ventun anni di storia.

Il sito è online in una sottocartella di marcomerlina.it: pochi file statici caricati via FTP su un hosting condiviso, senza build e senza servizi esterni. Per ora è la home; Carriera, Palmarès, Argentina e Galleria sono le prossime pagine.

Dentro il progetto

Le altre pagine.

Pagina «La firma che si scrive con lo scroll» del progetto Lionel Messi · Tributo
01 La firma che si scrive con lo scroll
Prima schermata di marcomerlina.it/messi su telefono, catturata dal vivo
02 Su telefono, dal vivo
Pagina «I numeri della carriera» del progetto Lionel Messi · Tributo
03 I numeri della carriera
Pagina «Monumental a tutta pagina» del progetto Lionel Messi · Tributo
04 Monumental a tutta pagina
Pagina «Sala dei trofei» del progetto Lionel Messi · Tributo
05 Sala dei trofei
Pagina «Campione del mondo» del progetto Lionel Messi · Tributo
06 Campione del mondo
Pagina «Il finale: Gracias por todo» del progetto Lionel Messi · Tributo
07 Il finale: Gracias por todo
Domande

Quello che di solito mi chiedono.

È il sito ufficiale di Lionel Messi?

No. È un tributo non ufficiale che ho progettato e sviluppato come progetto personale, senza legami con Messi né con i suoi club.

Con quali tecnologie è fatto?

HTML, CSS e JavaScript, con GSAP, ScrollTrigger e Lenis per il movimento e Three.js per le bandiere in 3D. Tutto è caricato via FTP su un hosting condiviso, senza passi di build.

Da dove vengono le foto?

Da Wikimedia Commons, con licenze libere. Autori e licenze sono elencati nella pagina dei crediti del sito.

Lavori correlati Tutti i 27 lavori
Prossimo lavoro02 / 27 Super Easy Web Far scegliere il sito al cliente con un configuratore a passi. Sito web · 2026