fbpx

Vuoi realizzare un semplice effetto parallasse? Non c’è bisogno di utilizzare Jquery ma è sufficiente conoscere qualche regola css. L’effetto è ottimo e hai il vantaggio di non appesantire la pagina con con codice ulteriore.

Il segreto sta nell’aggiungere un’immagine in background in un contenitore con una altezza specifica e ben definita. Inoltre devi utilizzare la seguente regola css:

img{
background-attachments: fixed;
}

Questo serve per creare l’effetto parallasse che lascia l’immagine in background fissa, mentre permette di far scorrere le altre sezioni e le immagini al di sopra con velocità differenti.

Le altre proprietà sono usate per centrare e scalare le immagini perfettamente.

img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In questo esempio usiamo le percentuali e non i pixel in modo da impostare l’immagine esattamente uguale alla larghezza dello schermo e quindi impostiamo l’altezza del contenitore parallax al 100%.
Molto importante è applicare l’altezza pari al 100% sia al tagche al tag.

Il tag “background-attachment: fixed” crea alcuni problemi ad alcuni dispositivi mobili. Si può ovviare a questo utilizzando le media queries e disattivando l’effetto parallasse con la seguente proprietà:

@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Come realizzare l’effetto parallasse con i Css”—

In questo video-tutorial ti spiego come realizzare un sito web più dinamico per attrarre maggiormente tuoi utenti. Con l’effetto parallasse crei maggior interesse per il tuo sito web perchè al movimento del mouse si muovono gli oggetti presenti sulla homepage. Quanto è noioso un sito web statico? Sono sufficienti alcuni semplici accorgimenti per vivacizzare e rendere più appetibile il tuo sito web. In questo primo video vi mostrerò come aggiungere movimento ad alcuni elementi della vostra home con l’effetto parallasse utilizzando un semplice plugin.
Il plugin Parallax.js che ho utilizzato nella mia risorsa e che potete scaricare nel link in fondo all’articolo, è stato realizzato da Matthew Wagerfield.

#1 – Scarica i file per il tuo progetto al seguente link e successivamente inserisci lo scrip nel foglio html:

<div id="scene”>
</div>

#2 – Crea i tuoi elementi html ed inseriscili nel codice html. Tieni conto che ogni istanza di Parallax ha bisogno di un elemento contenitore che chiamiamo scena. Puoi indicare il nome che vuoi:


<div id=""scene”"></div>

Tutti gli elementi figli della scena diventeranno oggetti in movimento e dei livelli indipendenti.

#3 – Inserisci l’opzione “data-depth” per definire il movimento e la profondità degli elementi. Questo elemento non deve mancare, altrimenti il plug-in non funziona.


<div id="scene”> <div data-depth=“0.2">Il mio primo livello</div>

<div data-depth="“0.6"">Il mio secondo livello</div>

#4 – Richiama il plugin nel foglio html:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Per capire come utilizzare le altre opzioni visita la pagina del produttore

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Parallax.js: aggiungi un tocco di vivacità al tuo sito web”—

La grande novità del 2018 è il rilascio di un Working Draft del W3C con nuove regole di Css4 che sono ancora in fase di discussione. Per cui prima che il Working Draft diventi Editor’s Draft, le cose potrebbero cambiare, ma credo che valga già la pena di introdurre il discorso che rivoluzionerà il codice Css ed Html. Rispetto al passato, le specifiche standard sono rilasciate in maniera più veloce e anche i browsers stessi, compreso Explorer, possono adottare più velocemente le nuove specifiche e funzionalità in modo da non dover aspettare molto a lungo per poter utilizzarle.
Prima di utilizzare puoi controllare lo stato di supporto attuale dei browser su Caniuse; noterai che molti selettori non sono ancora supportati, ma lo diventeranno ben presto.
La parte più importante dei selettori riguarda lo sviluppo dei form o moduli contatti che presentano tantissime novità.

Ecco i selettori CSS4 che possiamo utilizzare ora e che aggiungono più potere e più flessibilità al tuo lavoro e faccio un paragone tra il vecchio codice ed il nuovo.

SELETTORI CSS4

1# – Negation:
Questo selettore che si esprime con il :not è stato introdotto sin dai CSS3 ma adesso può accettare selettori multipli come un argomento, lasciando il nostro codice più leggibile e coinciso.

La sintassi attuale:

h1:not(.this-element):not (.another-element)
{
font-size: 1.2em
}

Nuova sintassi:

h1:not(.this-element, .another-element)
{
font-size:1.2em;
}

Questo elemento è supportato solo da Safari per ora.

#2 – Matches:

Questo elemento è l’opposto del precedente e può anche accettare selettori multipli come un argomento.
La nuova sintassi non cambia molto rispetto a quella precedente ma migliore in leggibilità.

La sintassi attuale:

h1.this-element,
h1.another-element
{
font-weight:bold;
}

Nuova sintassi:

h1:matches (.this-element, another-element)
{
font-weight:bold;
}

Questo elemento è supportato solo da tutti i Browsers

#3 – Relational

È possibile che questo elemento potrebbe non essere sviluppato a causa della sua complessità ad essere implementato.Questo elemento potrebbe permettere di dare uno stile ad un elemento in base ai suoi contenuti.

.container:has(.this-element)
{
background:green:
}

 

#4 – Drop

Questo selettore permette di aggiungere lo stile agli obiettivi di HTML5 drop. Lo stile può essere applicato se la parte da trascinare è valida, invalida o attiva.

.element:drop
{
border: 3px solid, background:grey
}
.element:drop(active)
{
border-color:blue;
}
.element:drop(valid)
{
border-color:green;
}
.element:drop(invalid)
{
border-color:red
}

#5 – Indeterminate

Associa elementi che sono in uno stato indeterminato. Checkboxes, radio button e progress bars possono essere in questo stato. Per esempio un checkbox genitore con 2 checkbox figli selezionati, può essere indeterminato. Questo può essere fatto solo in Javascript e non in HTML

input[type=“checkbox”]: indeterminate
{
opacity: 0.75
}

Questo selettore è supportato solo dai browser: Firefox, Chrome e Safari

#6 – Default

Associa elementi in default tra una serie di elementi simili, come per esempio l’evento selezionato in un elemento:

option:default
{
font-weight:bold;
}

Questo selettore è abbastanza supportato da tutti i Browsers.

#7 – Validity

Il selettore validity è utilizzato per gli elementi cha hanno uno stato di valido o invalido.

input:invalid
{
border:1px solid red;
}

input:valid
{
border:1px solid green;
}

Questo selettore è supportato da tutti i Browsers

#8 – Range

Il selettore Range applica agli elementi che hanno un limite di raggio come uno slide o un numero di input con valore massimo o minimo.

input: in-range.
{
background:green;
}
input:out-of-range
{
background:red:
}

Questo selettore è supportato da tutti i Browsers tranne Opera mini.

#9- Optionality

Questo selettore serve a chiarire quali elementi sono opzionali e quali invece sono richiesti in un form.

:required
{
border: 2px solid black
}
:optional
{
border:1px dashed grey;
}

#10 – User interaction

Questo selettore serve a creare lo stile ad un elemento invalido solo dopo che un elemento ha interagito con un’altro e non quando la pagina si carica. Questo è il caso di un campo di un modulo contatti che viene compilato in modo errato:

input: user-error
{
border:1px solid red;
}

#11 – Mutability

Questo elemento attribuisce uno stile al campo input o textarea che si basa solo sulla lettura o sulla scrittura:

textarea:read-only
{
color:grey;
}
tetarea: read-write
{
color: black;
}

#12 – Placeholder Shown

Questo selettore è abbastanza supportato dai Browser. Di solito gli elementi input di un form possono mostrare il testo segnaposto tramite click sul campo input. Ora invece possiamo dare lo stile a questi elementi che mostrano il testo segnaposto.

input:placeholder-shown {
border-color:blue;
}

#13 – Local Link

Questo selettore non è supportato da nessun browser. Il selettore Local link ti permette di creare stili diversi a link ( per esempio in un menù di navigazione

:local-link(0)
{
color: red;
}
:local-link(1)
{
color: green;
}

:local-link(2)
{
color: yellow;
}

#14 – Time Dimensional

Il funzionamento di questo selettore è simile a Matches( ) con la differenza che può selezionare l’elemento riferito ad un tempo che può essere corrente, passato e futuro. Questo selettore può risultare utile durante la visualizzazione di sottotitoli di un video HTML5.

:current(p, span) {
background-color: yellow;
}

:past(p, span),
:future(p, span) {
background-color: gray;
}

#15 – Hiperlink

Questo selettore associa tutti i link e sostituisce a:link e a:visited

:any-link{
text-decoration:underline;
}

Hai utilizzato questi selettori per i tuoi progetti? Se non l’hai ancora fatto, scarica gratuitamente la risorsa che ho creato per te ed utilizzala per i tuoi progetti.
Ti consiglio di visitare anche questo sito web per chiarire ulteriormente le tue idee e le possibilità di utilizzo dei selettori Css4.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “15 nuovi selettori CSS4 per creare form d’impatto”—

Il material design è una tecnica di design ideata da Google che pian piano ha rinnovato tutti i suoi prodotti  trasformandoli in design digitale innovativo, un linguaggio a metà tra flat design e skeumorfismo di Apple.
La parola chiave del material design è proprio “material” che vuol dire materiale cioè oggetto. L ’obiettivo del design materiale è di fare in modo che le interfacce si comportino come degli oggetti reali cercando di adeguarsi ad ogni situazione. L’ideatore di questo progetto Matias Duarte ha affermato che:

Come la carta il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cucitore danno il loro significato di qualcosa che tocchi.

In realtà il material design è un’evoluzione del flat design perché utilizza alcune sue caratteristiche come le palette di colori forti, le forme geometriche primarie e lo spazio largo tra testi.

Il material design è nato qualche anno fà come nuovo strumento per creare esperienze ed emozioni differenti nella progettazione di siti web. Il Design è un modo di pensare, un’esplorazione per capire cosa funziona, richiede collaborazione di diverse figure nel web e persone che lavorano per costruire il material design. Design è un linguaggio di condivisione, una serie di elementi che parlano tra loro in modo chiaro, elementi flessibili tra loro grazie ad ogni dettaglio. Design è “Niente è mai fatto” perché siamo in un mondo di continua evoluzione e continui bisogni.
Material design è un sistema unificato, attraverso la combinazione di materie, risorse, e uomini che collaborano insieme per trovare soluzioni nuovi insieme.

Material.io  è un luogo virtuale dove sono inseriti tutti i lavori realizzati con il material design, con lo scopo di condividerlo e di farlo crescere. Il material Design ti permette di ridefinire gli aspetti della tua interfaccia, dai colori alle animazioni e di realizzarle in modo corretto su ogni dispositivo. Grazie a strumenti come REMIXER puoi fare modifiche in tempo reale grazie alla possibilità di ridefinire il design attraverso il cambiamento di colore, animazione e visibilità senza necessità di modificare il codice o di far ripartire la applicazione.

OBIETTIVI

Il material design ha l’obiettivo di far condividere una serie di principi che vanno dal buon design a quelli di innovazione, di scienza e tecnologia; Questo viene raggiunto attraverso sistemi che realizzano un’esperienza unica per diverse piattaforme e differenti dimensioni di ogni dispositivo. Le regole per i dispositivi mobili sono importanti, ma lo sono anche quelle riguardanti i touch, la voce, il mouse e la tastiera sono input fondamentali.

PRINCIPI

  1. Superfici tattili: le superfici digitali devono essere reali, tangibili, toccabili con uno spessore di 1 dpi (dot per inch). Utilizzando questo spessore unitario vi è la definizione utilizzata di quantum paper. In questo modo gli elementi acquisiscono ombre realistiche perché sono strutturali in modo gerarchico. La suddivisione in livelli migliora l’esperienza utente e fa spostare la sua attenzione su elementi importanti della pagina come i pulsanti o menù di navigazione. Questa è la differenza più importante con il flat design che come dice il nome stesso vuol dire piatto. Il design materiale invece introduce il concetto di profondità e tridimensionale delle superfici delle interfacce ma che rimane sempre semplice con le linee e le forme.
    A seconda della importanza i quantum paper sono disposti ad una diversa altezza facendone cambiare l’ombra generata. Per esempio i pulsanti di navigazione principali vengono messi in primo piano, mentre le strutture a blocchi dell’interfaccia sono posti  più in basso con un’ombra meno consistente.
  2. Animazioni intelligenti: le interfacce non sono statiche e devono però essere sensate e coerenti con l’esperienza dell’utente. Un’animazione deve essere una conseguenza di un gesto e di una intenzione dell’utente quindi devono essere intelligenti. Molto importante è anche che le animazioni partano dal punto in cui l’input è stato dato. Il movimento è significativo ed appropriato, e serve a focalizzare l’attenzione e mantenere continuità. Le transizioni sono efficienti e coerenti.
  3.  Adattabilità: le interfacce grafiche devono essere responsive e cioè adattarsi in modo dinamico ad ogni dispositivo, computer, tablet o cellulare. Un modo per strutturare un’interfaccia di un applicazione utilizzata da ogni dispositivo è creare diverse dimensioni per i blocchi, cioè le card che compongono la grafica. Per esempio al di sotto dei 700 pixel di larghezza dello schermo questo contenuto verrà mostrato in modo diverso rispetto agli schermi più grandi.
  4.  Inchiostro digitale: è la necessità della stampa alle superfici digitali delle interfacce. Tutto quello che viene applicato alle superfici digitali, diventa inchiostro digitale e prende forma reale. Così come avviene nel design stampato, la tipografia svolge un ruolo importante. Google utilizza solo un font di Roboto che ha 8 diversi pesi che ne garantiscono un ampio utilizzo ma non per questo è stato criticato. Dell’inchiostro digitale fanno parte anche i colori e le immagini utilizzate. Google consiglia di non scegliere più di 3 colori o di non utilizzare immagini che non spiegano bene il contesto oppure che non sono di alta qualità.

 

Gli elementi fondamentali di tipografia, griglie, spazio, scala, colore e uso di immagini sono la guida visuale del material design. Questi elementi sono elementi gerarchici. La scelta di colori particolari  hanno lo scopo di creare una superficie in bold che immergo l’utente nella loro esperienza.

LIBRERIA ICONE
Le icone materiali sono belle, deliziose, e facile da usare nei progetti web. Il modo migliore per usarle è quello di utilizzarle come icon-font poiché pesano poco, sono facili da usare, e sono ospitate da google web font.
Una varietà di icone di varie dimensioni e densità possono essere scaricate da questa libreria. Le icone sono disponibili anche

COMPONENTI MATERIALI
I componenti sono precisi, aggiornati periodicamente e open-sources e creano bellissime applicazioni con componenti UI modulari e customizzabili. I componenti sono aggiornati ogni volta e man mano che il Material design si evolve assicurando una programmazione ed implementazione con pixel perfetti. Sono disponibili anche i widget del material design.

STRUMENTI UTILIZZABILI
Ci sono diversi strumenti da poter utilizzare:

  • Gallery: facilitano l’utilizzo ripetitivo del design e ti permettono di catturare feedback sia visuali che di movimento. È possibile annotare e commentare su ogni immagine o video frame, per questo i progetti progrediscono a velocità incredibile;
  • Color tool: si possono creare e condividere palette di colori e misurare il livello di accessibilità  di ogni combinazione di colore;
  • Remixer: aiuta gli sviluppatori ed i designer a configurare e aggiustare il design delle apps in modo collaborativo. Permette facilmente di affinare il design cambiando il colore, le animazioni e la visibilità senza il bisogno di modificare il codice o di far ripartire l’applicazione;
  • Resizer: Vista interattiva che aiuta i designer a provare i breakpoint del design materiale attraverso i dispositivi desktop, mobile e tablet;
  • Device metric: È un esauriente risorsa per dimensioni, e risoluzioni e più dispositivi mobili;
  • Stage: definisce interfacce dinamiche con movimenti interattivi. Ti permette di cambiare il modo di fare design e di costruire esperienze interattive. Stage è uno strumento di design che supera i processi statici di design facilitando un flusso di lavoro più dinamico e sistematico per creare esperienze digitali;

Il material design sta diventando una tendenza molto di moda sia per le forme che per la struttura ed i colori. Google ha saputo creare un unico linguaggio nel mondo del design creando qualcosa di innovativo grazie alla metafora del materiale. Conosci altri siti web realizzati con la tecnica del Material Design? Segnalalo nei commenti.

Viva le velo è un progetto creato dall’agenzia Parallax, un agenzia digitale con sede a Leeds e Londra il cui obiettivo principale è quello di far si che “il web funzioni”. Non male come obiettivo, visto che oggi tutti si improvvisano esperti del web. Se dai un occhio al loro sito web puoi notare come siano esperti di effetti parallasse, cioè quella tecnica che utilizza diversi oggetti che si muovono a velocità diverse.

Viva le velo è un sito web creato per omaggiare gli appassionati di bicicletta, che celebra in modo interattivo le bici da strada possedute dai più grandi corridori ed in particolare coloro che hanno vinto il Tour de France con effetti parallasse molto belli.

Nella homepage, con un sounds che ricorda le fantastiche corse in bici dei più grandi ciclisti, riportandoci a quei tempi, si respira questa bellissima atmosfera dei nostri più grandi ciclisti, compresi i nostri Cipollini e Pantani.

Scrollando la pagina verso il basso, troviamo un’illustrazione interattiva delle più belle bici da corsa dei più grandi campioni di ciclismo. Ogni bicicletta è stata creata graficamente con un illustrazione appositamente creata per l’occasione. Ogni bicicletta graficamente disegnata ricorda un anno ben preciso a partire dal 1975 e contiene un box informazione visibile con un popup che spiega la storia della bicicletta e del suo corridore.

Ci sono anche i nostri Mario Cipollini nel 1997 ricordato soprattutto per il suo stile, con la sua Cannondale Saeco Caad3, di colore rosa e fiammingo e le sue ruote particolari a 4 raggi, che successivamente sono state vietate perché pericolose.

Anche Marco Pantani è stato inserito in questo progetto, ricordato soprattutto per aver vinto sia il Tour de France che il Giro d’Italia nel 1998, con la sua Bianchi Mercatone uno, costruita appositamente per lui che con la sua leggerezza e geometria li ha dato la possibilità di essere un vincente sopratutto nelle scalate in salita.

In questa illustrazione sono messe in evidenza la precisione infermieristica utilizzata nella costruzione che fa di queste biciclette e affascinanti sopratutto ripercorrendo la loro vera storia.

Scheda del Sito

Colori : chiaro, pastello che funzionano bene sia sul desktop che sul mobile.

Caratteristica principale: aspetto visual e motion;

Tool utilizzato: Svg per le biciclette;

Tempo Progetto: 3 mesi;

Agency: Parall.ax;

 

In questo video-tutorial vediamo come gestire un menù di tipo dropdown, cioè con voci di menù di secondo livello che si aprono al passaggio del mouse della voce principale. Molto semplice è la gestione di un menù di sole voci di menù di primo livello, mentre con più livelli è più complicato perché dobbiamo anche gestire le sotto voci costituite dagli “ul nidificati nei tag li”.
Io ho trovato una soluzione con il plugin pushy.js. che è un menù di navigazione responsive off-canvas che usa le transizioni e trasformazioni CSS. Vediamo come funziona. Qui ‘è tutta la documentazione.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME TRASFORMARE UN MENU’ DROPDOWN IN MENU’ RESPONSIVE”—

Dopo il grande successo del video “Come realizzare un menù a tendina con le transizioni Css3” in termini di visualizzazioni che però ha creato non pochi problemi, sia per la visualizzazione che per il montaggio ( chiedo ancora scusa ma ero alle prime esperienze in termini di video-tutorial) ho deciso di riscriverlo modificandolo leggermente il codice e creandone una versione responsive ( che vedremo nel prossimo video tutorial ).
(altro…)