Come ogni lunedì vi presento un fantastico sito in HTML5 davvero di sicuro impatto: La Moulade. Il sito è la vetrina della web agency e salta subito all’occhio per interattività e nuove (sorprendenti) animazioni con jQuery.
Il sito si presenta dopo un breve caricamento, molto ben strutturato nella home abbiamo tutti i richiami al social share nonchè a un rapido menù per iniziare subito la navigazione. La sorpresa è stata durante lo scrolling del sito, in pratica attraverso il trigger sullo scroll diamo il via a una sorta di navigazione animata, molto dinamica e di sicuro effetto.
01. Panoramica e servizi
Si passa dalla Home page a una pagina di servizi (anch’essa animata con JQuery), molto ben strutturata. L’effetto “rotate” è stato realizzato con i potente CSS3 e assicura un notevole impatto visivo.
02. Il portfolio dinamico
Anche il portfolio viene animato con un gradevole effetto “apparizione” già visto in altri siti oltre oceano. Se clicchiamo su un progetto possiamo anche vedere il suo (comodo) riepilogo tecnico.
03. Tecnologie usate e “tips”
Il sito è realizzato interamente con JQuery, questo ci fa capire come questa nuova tecnologia si sia radicata, soppiantando insieme ad html5 e css3, definitivamente il flash per l’ideazione di siti, anche molto complessi come in questo caso.
Per la navigazione tramite scroll lo stratagemma usato è molto semplice ma “avanzato” allo stesso tempo: il principio è far apparire e scomparire lo scroll bar (overflow:hidden –> auto), ad ogni trigger sullo scroll del mouse. A seconda poi del position, ovvero della attuale posizione sul documento (sviluppato su più “schermate” ideali), vengono fatti apparire le varie sezioni del sito. Stesso principio per il portfolio, ad un certo position del documento (#portfolio) si ha l’apparizione e l’offset delle immagini che lo compongono creando quel gradevole effetto.
Ovviamente questa è la spiegazione molto semplificata del tutto, e il “motore” jQuery è davvero complesso ed avanzato.
UPDATE: SVELATO IL CODICE PER EFFUTTUARE L’ANIMAZIONE DEL PORTFOLIO >>
Gli unici difetti che posso attribuire al sito è la troppa “complessità”: è vero il sito è sicuramente d’impatto e gradevole ma siamo davvero sicuri che il cliente medio italiano ci sappia navigare agevolmente? insomma gli spunti ci sono ma è giusto rendere il sito usabile solo a “pochi eletti” (sopratutto se fatto a fini commerciali?).
A voi l’ardua sentenza.
Indubbiamente innovativo ma in quanto a navigabilità mi sorgono parecchi dubbi…
si infatti è quello che ho pensato io all’estero sono sicuramente molto più avanti di noi come mentalità, qui in Italia sarebbe difficile far navigare l’anzianotto di 65 anni su un sito del genere. Senza dubbio però potrebbe essere un buon showcase per far vedere “di cosa siamo capaci”.
Come showcase è decisamente ingegnoso…bisogna però sperare che qualcuno capisca che sai anche fare cose “normali” 😀