video-tutorial

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”—

Name *

Email *

In questo video-tutorial vediamo un’altro modo di utilizzare l’effetto parallasse per creare un effetto scrolling pagina accattivante con gli oggetti e gli sfondi che fanno un’azione particolare. In questo articolo sono elencati tutti i tipi di plug-in che possiamo trovare ed utilizzare per creare effetti particolari.

Io ho scelto il plugin MultiScroll.js, realizzato da Alvaro Trigo, poiché crea un effetto di divisione della pagina verticale nello scrolling per passare da una sezione all’altra.

Con questo plugin è possibile modificare ed impostare diverse proprietà importanti come la velocità, il tipo di easing, le opzioni di scrolling della tastiera e molte altre proprietà in modo da poter customizzare l’effetto di cui si ha bisogno.

Ecco l’esempio creato dello sviluppatore del plug-in e che ho cercato di realizzare per voi nella risorsa che ho caricato sul mio blog.

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 “Utilizza MultiScroll.js per realizzare un effetto scrolling accattivante”—

Name *

Email *

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="&quot;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”&gt; &lt;div data-depth=“0.2">Il mio primo livello</div>


<div data-depth="“0.6&quot;">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”—

Name *

Email *

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”—

Name *

Email *

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…)

Il responsive web design è ormai considerata un ’arte vera e propria che richiede molta lettura, pratica ed esercizio per poter essere compresa e poi implementata. Per raggiungere questo obiettivo è importante tener conto di alcune regole e concetti che ti permetteranno di realizzare un sito web correttamente visualizzabile su su qualsiasi risoluzione e quindi dispositivo. In primo luogo non si può prescindere da un approccio fluido di progettazione e sviluppo.
(altro…)