Pubblicato da: Max
In data:
26 Apr 2022
Tempo di lettura:
Pagina di presentazione con video-cover e utilizzo di diverse tecniche Html – Css – Javascript
- Impostazioni di base
- Creazione Header
- Inseriamo Logo
- Inseriamo Label e Check per gestire il click degli eventi
- Inseriamo il Titolo
- Inseriamo i 3 modelli di Zippo
- Inseriamo la cassa di legno
- Inseriamo le immagini dei 3 zippo aperti
- Sovrapponiamoli ai rispettivi modelli chiusi
- Definiamo la regola css che al click cambierà l’immagine dello zippo chiuso in quella dello zippo aperto
- Realizziamo in css la fiamma dell’accendino
- Completiamo la fiamma e posizioniamola su tutti i modelli di zippo
- Inseriamo il video in background e la cover della scena
- Ridiciamo le dimensioni del video prima di caricarlo
- Inseriamo la prima funzione in JavaScript, che gestirà al click, play e pausa del video
- Inseriamo nella scena un filtro
- Al click la scena si avvicina e il filtro diventa più chiaro
- Al click si apre l’accendino e appare la fiamma
- Definiamo l’animazione della fiamma
- Al click il titolo sparisce
- Realizziamo in css la luce della fiamma sulla scena
- Anche la luce deve apparire al click
- Realizziamo l’animazione della luce
- Realizziamo in css la luce della fiamma sulla scena
- Inseriamo i suoni di apertura e chiusura dello zippo
- la funzione script che gestisce il suono dell’apertura e chiusura dello zippo
- Inseriamo i 3 sottotitoli di descrizione
- Scrollando la pagina i 3 sottotitoli si fissano ad una certa distanza dal top
- Inseriamo le 3 icone dei sottotitoli
- Inseriamo la funzione per gestire il movimento dei 3 sottotitoli e del titolo principale allo scrolling della pagina
- Inseriamo il footer che conterrà i 3 Button che ci permetteranno di modificare il modello di zippo da visualizzare
- Inseriamo la classe slideUp e che si aggiungerà al footer grazie ad una funzione in JavaScript che si attiverà quando la pagina scrolla dal top ad una determinata distanza
- Realizziamo l’animazione per la classe slideUP
- Inseriamo la dichiarazione no-slideUp
- Aggiungiamo no-slideUp alla funzione che gestisce il footer
- Aggiungiamo l’animazione per la classe no-slideUP
- Sistemiamo i 3 button
- Sistemiamo ila visualizzazione della scena al click
- Inseriamo la funzione che gestisce il suono di cambio del modello di zippo
- Completiamo la funzione che al click sui Button fa partire il file cambio-zippo.mp3
- Inseriamo la funzione per il cambio del modello di zippo
- Completiamo la funzione per il cambio del modello di zippo
- Gestiamo l’hover sui Button
- illuminiamo la cassa al click
- Gestiamo il momento in cui i sottotitoli scrollando si avvicinano al titolo principale
- Inseriamo l’effetto di calore al momento che lo zippo è acceso
- Facciamo in modo che si adatti anche ai dispositivi mobile – Parte 1
- Facciamo in modo che si adatti anche ai dispositivi mobile – Parte 2
- Ancora qualche piccolo ritocco
- Progetto Finito!
Per scaricare i file che ho utilizzato per creare la pagina “Accendini Zippo”, utilizza il seguente link:
https://drive.google.com/drive/folders/1RZfok1GQPgA7i7wjMvCkuSfnxeBkWxcJ?usp=sharing
