INSERIMENTO E VISUALIZZAZIONE DI VIDEO IN LOOP SU OGGETTO SWIPER ANIMATED
RESPONSIVE
Progetto FREE
Prima di addentrarci nel panorama degli slider a video bisogna sapere alcune cose:
Aggiungere video a uno OGGETTO COME SWIPER GRID ANIMATED può essere una scelta potente ma va valutata attentamente. Ecco i pro e contro con video e senza video:
OGGETTO IMMAGINE CON VIDEO
Pro:
- I video catturano più attenzione rispetto alle immagini statiche, migliorando il coinvolgimento.
- Perfetto per narrare una storia, mostrare demo di prodotti o trasmettere emozioni.
- Un breve video può comunicare molto più di un'immagine, utile per spiegare concetti complessi o mostrare azioni.
- I video possono trasmettere il tono e lo stile del tuo brand in modo efficace.
Contro:
- I video aumentano il peso della pagina, rallentando i tempi di caricamento (soprattutto su connessioni lente).
- Se mal progettati, i video possono risultare troppo invadenti o distrarre da altri contenuti.
- Potrebbero non funzionare bene su dispositivi meno preformanti o in connessioni lente.
- Video in auto-play possono disturbare utenti, soprattutto se includono audio.
Pro:
- Immagini ottimizzate si caricano molto più velocemente rispetto ai video.
- Non ci sono problemi legati al supporto del video o al consumo di risorse del dispositivo.
- Gli slider statici possono dare un'impressione più formale e meno invadente.
- Più semplice da implementare e gestire rispetto a uno slider con video.
Contro:
- Le immagini statiche potrebbero non attirare l’attenzione come i video.
- Non permette di mostrare azioni o sequenze che possono spiegare meglio un prodotto o servizio.
- Gli utenti potrebbero ignorare uno slider statico se non è visivamente interessante.
Quando Scegliere un OGGETTO IMMAGINE con Video
- Quando hai contenuti video ben realizzati e leggeri.
- Se desideri presentare dinamismo o narrare una storia visivamente.
- Per promuovere prodotti, eventi o brand che si basano molto su emozioni visive.
Quando Scegliere un OGGETTO IMMAGINE senza Video
- Se la velocità di caricamento e la semplicità d’uso sono prioritari.
- Quando vuoi una grafica leggera, adatta anche a connessioni lente o dispositivi più vecchi.
- Per contesti formali o con pubblico che apprezza un’esperienza meno invadente.
Peso Ideale per un video?
- 1,5mb a scendere.
Fatte le premesse passiamo alla progettazione.
- Progetta una pagina TEST
- In fase di progetto inserisci un oggetto SWIPER GRID
. Estendilo in larghezza anche sullo stile riga. Imposta i margini dell'oggetto,sia interni che esterni TUTTI A ZERO. - Apri l'oggetto immagine con un doppio click e carica una immagine in trasparenza ALPHA da 3000X860 o 1920x 800. Nell'esempio abbiamo utilizzato la prima misura.
- Portati in stile riga e nelle opzioni scegli VIDEO.
- Inserisci il tuo video
- Inserisci la tua immagine di copertina che deve fare da pre-caricamento.
- FATTO!
- SE VUOI L'HEADER IN TRASPARENZA VAI SULLA PROPRIETÀ DELLA PAGINA (CODICE) E INSERISCI IL CODICE SEGUENTE ▼ PRIMA DELLA CHIUSURA DEL TAG HEAD
<style> body {overflow-x:hidden} </style> <style> #imHeader_imMenuObject_02-menu-opened.animated {z-index: 50000 !important;} #imContent { position: relative !important; top: -120px !important; } #imHeader {z-index: 30000 !important;} /* Disabilita le regole tra 959.9px e 380.9px */ @media screen and (max-width: 959.9px) and (min-width: 380px) { #imHeader_imMenuObject_02-menu-opened.animated {z-index: initial !important;} #imContent { position: initial !important; top: initial !important; } #imHeader {z-index: initial !important;} } </style> |
Vai sull'anteprima e guardalo con uno dei browser disponibili. Calcola che il video in anteprima non lo vedrai.Solo lanciando uno dei tuoi browser potrai valutare il tuo progetto. Se tutto è andato per il verso giusto otterrai un video accattivante e coinvolgente senza audio che gira in loop. Questo content slider non è al 100% responsive ma facendo alcune prove o variando riferimenti al codice si può ottenere un adattamento quasi prossimo al responsive ma comunque lasciandolo così avrai un giusto compromesso di visualizzazione.
- Questa pagina reca l'esempio video in questione.
- Le regole vengono disabilitate a partire dai 960px
COMMENTA ▼
Non sono presenti ancora recensioni.