Oggi vi presento il mio menù animato che ho realizzato immaginando una home per un’app di media center. Ecco l’esempio: See the Pen Square menu with animations by Carlo Peluso (@carlo-peluso) on CodePen.
Archivio:
design
Obiettivo: animare blocchi a comparsa in modo che compaiano in modo sequenziale, con un lieve ritardo nell’animazione di ogni elemento. Nella visualizzazione di liste, icone, menu o blocchi può essere interessante animare la comparsa di questi elementi in modo che entrino “in scena” uno dopo l’altro in istanti di tempo successivi. Fare manualmente questa operazione […]
Partiamo dalla semplice osservazione che “Il fine dell’operazione di scroll è visualizzare uno specifico contenuto”. Nasce quindi l’esigenza di gestire il “target” dello scroll, ovvero il punto esatto di arrivo dell’operazione di scrolling (sia tramite touch sia tramite mouse). Il seguente video fa vedere quanto sia vantaggioso “agganciare” (snap) lo scrolling ad un determinato contenuto (nell’esempio […]
Il “Bubble Menù” (menù a bolle) permette di visualizzare voci di menu a partire da un singolo bottone (un’estensione del floating action button per gli amanti del Material Design), un ottimo modo per “esplodere” o ramificare delle sotto-voci di menu a partire da una singola voce. Ne ho realizzato un esempio: See the Pen Bubble […]
Il layout in stile “Masonry” è molto popolare nel web, in quanto una delle più versatili soluzioni per la visualizzazione di card ad altezza variabile. La libreria che da il nome al layout, “Masonry Grid”, è stata rimpiazzata dalle proprietà native di CSS3. Ho realizzato un semplice prototipo utilizzando la proprietà columns-*. column-count: 5; column-gap: 5px; TIP: Utilizzando […]
L’ingresso delle MIDI API nei browser moderni segna una nuova era del concepire i sistemi Midi finalmente sul Web. In futuro anche i musicisti avranno applicazioni internet in grado di far comunicare strumenti musicali tramite delle semplici API, che comprendono oltre alla parte di comunicazione Midi, anche filtri e processori audio. Il prototipo che ho […]
L’ascolto della musica è stata da sempre la mia attività celebrale preferita. Per questo ho avuto la necessità di organizzare la mia collezione privata di cd rippati in mp3 realizzando un prototipo di Web Media Player, sviluppato in AngularJS, CSS3, Slim (libreria in Php per la realizzazione di Rest API). Il lettore è organizzato in artisti ed […]
Questo loader animato è stato realizzato con la tecnica morphing CSS, usando il trick della sfocatura contrastata (applicata ad ogni singolo div), ovvero l’istruzione: filter: blur(10px) contrast(86); Aprire CodePen per ottenere il codice di questo esempio. See the Pen Morphing animated pattern pure CSS by Carlo Peluso (@carlo-peluso) on CodePen.
Questo è uno sfondo animato realizzato usando le animazioni CSS3 e SVG, in particolare giocando sulle stroke (bordi). L’animazione parte lentamente e si evolve in una sorta di pittura astratta composta da 3 path diverse. La forma è stata editata usando il tool online SVG Edit. See the Pen SVG Abstract Animation Background by Carlo Peluso (@carlo-peluso) […]
SVG è capace di grandi cose. Per sperimentare le sue possibilità iniziali, ho realizzato questa sorta di creatura organica utilizzando esclusivamente: SVG CSS3 (+ animations) HTML Cliccare su Edit on Codepen per visualizzare il codice. See the Pen SVG Organic Creature by Carlo Peluso (@carlo-peluso) on CodePen.