Il making of di ‘Faces of Power’
Il mio progetto personale facesofpower.net è stato apprezzato sia dalla platea tecnologica del web, sia da quella che si occupa di informazione generalista.
In questo post ricostruirò i passi principali dietro alla sua creazione.
Tutte le immagini del sito sono state processate con la libreria primitive.js. La forma scelta è il triangolo, con un elevato numero di iterazioni e un’alta shape optimization.
L’SVG ottenuto in uscita (opzione vector image) è un oggetto con un rect di background e una lista di path, 100 per ogni immagine di presidente. Ho rimosso gli attributi width = “” e height = “” dal tag SVG per ottenere un’immagine fluida a schermo intero.
<svg viewBox=”0 0 192 256" clip-path=”url(#clip)”>
<defs>
<clipPath id=”clip” clipPathUnits=”objectBoundingBox”>
<rect x=”0" y=”0" width=”192" height=”256"/>
</clipPath>
</defs>
<rect x=”0" y=”0" width=”192" height=”256" fill=”rgb(166, 166, 166)”/>
<path d=”M329,255L34,107L-74,334Z” fill=”rgb(28, 28, 28)” fill-opacity=”0.95"/>
<path d=”M74,29L-22,230L118,27Z” fill=”rgb(29, 32, 27)” fill-opacity=”0.82"/>
<path d=”M1298,-422L78,102L84,55Z” fill=”rgb(210, 223, 195)” fill-opacity=”0.77"/>
…Nel markup HTML della pagina ho inserito solo il primo SVG, quello di Donald Trump. Poi, per ogni morphing necessario per gli altri presidenti, ho trasformato i singoli path di questo SVG iniziale attraverso delle animazioni con la libreria anime.js (ogni presidente ha 100 animazioni di path e 1 per il colore di sfondo del rect)
anime({
targets: path1_1,
d: “M-211,316L94,132L390,230Z”,
fill: “rgb(47, 57, 78)”,
fillOpacity: “0.99”,
duration: 2000,
easing: ‘easeInOutCubic’
});anime({
targets: path1_2,
d: “M114,38L344,-205L199,178Z”,
fill: “rgb(255, 255, 248)”,
fillOpacity: “0.45”,
duration: 2000,
easing: ‘easeInOutCubic’
});…
Come si può vedere, per ogni path ho cambiato le coordinate, il colore di riempimento e l’opacità di riempimento, il tutto in 2 secondi con un easing easeInOutCubic.
L’animazione viene attivata dall’evento afterChange dello slider Slick: in questo modo ogni faccia può trasformarsi in qualsiasi altra faccia.
$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){
if ($("#obama").hasClass("slick-active")) {
...Altri dettagli
L’effetto di parallasse sui presidenti (applicato solo per i browser webkit, sugli altri creava problemi di performance) è stato ottenuto in questo modo: ho messo 4 SVG sovrapposti, dividendo quindi i 100 path in 4 gruppi da 25 path, e poi li ho animati con parallax.js.
In realtà le tre immagini della intro hanno un morphing di 500 path: con soltanto 100 il Monte Rushmore aveva una resa di scarsa qualità e non era riconoscibile.
Accoglienza
Qui potete trovare un elenco di siti in cui il mio progetto è stato presentato o ha vinto dei premi:
