EFFETTO ONDA - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
CONTENT SLIDER
Smart Solutions...
CONTENT SLIDER
Smart Solutions...
UN EFFETTO ONDA ALLA BASE DI UN CONTENT SLIDER CON VIDEO IN LOOP
ADATTATO!!!

Progetto FREE


PREMESSE PRO CON VIDEO CONTRO CON VIDEO PRO SENZA VIDEO CONTRO SENZA VIDEO COSA SCEGLIERE?



Prima di addentrarci nel panorama degli slider a video bisogna sapere alcune cose:
Gli slider (o caroselli) sono elementi comuni nei siti web, spesso utilizzati per mostrare contenuti visivi in sequenza. Aggiungere video a uno slider può essere una scelta potente ma va valutata attentamente. Ecco i pro e contro di uno slider con video e senza video:



Slider 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 performanti o in connessioni lente.
  • Video in autoplay 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 uno Slider 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 uno Slider 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.
PREPARAZIONE DEI BREAK POINT:
  • VAI AL PASSO 2 - MODELLO - ICONA RESPONSIVE DESIGN.
  • Realizza una struttura come nell'immagine seguente (devi avere una versione X5PRO per farlo) ▼
  • (    OBBLIGATORIA SE VUOI SFRUTTARE QUESTO ESEMPIO     ) ►►► SCARICA UN MODELLO CON BREAK-POINT GIÀ PRE-IMPOSTATI


Inizia con il progettare la tua pagina.

  • All'inizio metti un separatore da 60px . Estendilo ↔ per tutta la cella anche in stile riga. Lascia i margini impostati di default per il momento. Se tutto funzionerà a dovere non dovrai toccarli.
  • Sotto al separatore metti l'oggetto CONTENT SLIDER . Estendilo ↔ in larghezza anche sullo stile riga. Imposta i margini dell'oggetto,sia interni che esterni TUTTI A ZERO come da immagine sottostante indicativa.

  • Ora portati sullo opzioni CONTENUTI del content slider. Metti la trasparenza sullo sfondo immagine e sull'owerlay. Non devi inserire nessuna immagine. Metti un tuo TITOLO, uno slogan e sul pulsante la voce CONTATTI (che dovrà puntare alla tua pagina contatti).
  • Ora portati sullo STILE del Tuo content slider e imposta una altezza di 450px e 50% come immagine, 48px il Tuo Titolo, 14px il tuo slogan e 12px la voce CONTATTI del pulsante e imposta i margini INTERNI del bottone in 48x48x10x10.
  • Ora di seguito inserisci un oggetto HTML  e, su codice html, inserisci questo codice: ▼

  • Salva tutto
  • Ora Aggancia i TRE oggetti tra loro sempre mantenendo la massima estensione.
  • Ok ora sei pronto per mettere un video e una immagine di copertina. Tieni presente che altezza e margini sono indicati per questa soluzione ma ciò non toglie che tu possa modificarli in base alle tue esigenze.
  • Portati quindi in stile riga e scegli VIDEO.
  • Inserisci il tuo video possibilmente dalle misure 1920x720 viceversa devi fare delle prove con quelli da 1920x1280
  • Inserisci di seguito la tua immagine di copertina che più si adatti al restringimento del browser . (bisogna fare prove su prove e scegliere una immagine che rappresenti un giusto compromesso nel caso risultasse leggermente tagliata a risoluzioni più basse.



In alternativa puoi scegliere anche di mettere 2 sole immagini in questo caso scegliendo IMMAGINE e SEQUENZA IMMAGINI A TEMPO.
Ora Vai al PASSO 3 - MAPPA - PROPRIETA' e poi su esperto. Incolla tutto il codice che segue e mettilo su ►prima della chiusura del tag HEAD
In neretto l'identificatore di questo slide che andrà sostituito (su tutto l'intero codice) con il vostro che trovate facendo ispezione codice della vostra pagina.
INSERIMENTO DEL CODICE EXTRA
CODICE
INSERISCI PRIMA DELLA CHIUSURA DEL TAG HEAD
<style>
/* Regola generale per il contenitore dello slider fusione di codice GiancarloWeb-Giuseppe Guida-Max*/

#imObjectContentSlider_11_255 {
  width: 100%; /* Larghezza piena del contenitore */
  height: auto; /* Altezza automatica */
  display: flex; /* Usa Flexbox per l'allineamento */
  justify-content: center; /* Centra gli elementi orizzontalmente */
  align-items: center; /* Centra gli elementi verticalmente */
  overflow: hidden; /* Nasconde gli elementi che escono dal contenitore */
  margin: 0; /* Nessun margine */
  padding: 0; /* Nessun padding */
  box-sizing: border-box; /* Include bordi e padding nella dimensione */
}

/* Stile per le immagini dello slider */
.content-slider.slide-image-content {
  width: 100%; /* L'immagine occupa tutta la larghezza */
  height: auto; /* Altezza proporzionata alla larghezza */
  object-fit: cover; /* Riempie l'area senza distorsioni */
  box-sizing: border-box; /* Calcolo dimensioni inclusivo */
}

/* Media Query per diversi breakpoint */

/* Risoluzioni >= 1680px */
@media (min-width: 1680px) {
  #imObjectContentSlider_11_255 {
      min-height: 720px; /* Altezza minima per risoluzioni alte */
  }
  .content-slider.slide-image-content {
      object-fit: cover; /* Copertura completa */
  }
  .slide-title {
      font-size: 28px; /* Dimensione del testo più grande */
  }
  .slide-button {
      font-size: 16px; /* Dimensione maggiore per i pulsanti */
      padding: 10px 20px; /* Spaziatura pulsanti */
  }
}

/* Da 1679,9px a 1379px */
@media (max-width: 1679.9px) and (min-width: 1380px) {
  #imObjectContentSlider_11_255 {
      min-height: 350px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 24px;
  }
  .slide-button {
      font-size: 14px;
      padding: 8px 16px;
  }
}

/* Da 1378,9px a 1280px */
@media (max-width: 1378.9px) and (min-width: 1280px) {
  #imObjectContentSlider_11_255 {
      min-height: 350px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 22px;
  }
  .slide-button {
      font-size: 12px;
      padding: 6px 14px;
  }
}

/* Da 1279,9px a 1149px */
@media (max-width: 1279.9px) and (min-width: 1150px) {
  #imObjectContentSlider_11_255 {
      min-height: 300px;
  }
  .content-slider.slide-image-content {
      object-fit: contain; /* Adatta l'immagine senza tagliarla */
  }
  .slide-title {
      font-size: 20px;
  }
  .slide-button {
      font-size: 11px;
      padding: 5px 12px;
  }
}

/* Da 1148,9px a 960px */
@media (max-width: 1148.9px) and (min-width: 961px) {
  #imObjectContentSlider_11_255 {
      min-height: 100px;
  }
  .content-slider.slide-image-content {
      object-fit: contain;
  }
  .slide-title {
      font-size: 18px;
  }
  .slide-button {
      font-size: 10px;
      padding: 4px 10px;
  }
}

/* Da 959,9px a 720px */
@media (max-width: 959.9px) and (min-width: 721px) {
  #imObjectContentSlider_11_255 {
      min-height: 100px;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 30pt !important; /* Testo più grande */
  }
}

/* Da 719,9px a 200px */
@media (max-width: 719.9px) and (min-width: 200px) {
  #imObjectContentSlider_11_255 {
      min-height: 350px !important;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 26pt !important;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px; /* Dimensione dei pulsanti di controllo */
      height: 40px;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      background-color: rgba(229, 173, 38, 0.86); /* Colore pulsante */
  }
}

/* Da 599,9px a 200px */
@media (max-width: 599.9px) and (min-width: 200px) {
  #imObjectContentSlider_11_255 {
      min-height: 250px !important;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 22pt !important;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_11_255 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px;
      height: 40px;
  }
}

/* Fine codice personalizzato */
</style>

Dopo aver salvato il tutto vai al passo 4 ► responsive e alla risoluzione 960 nascondi il primo separatore come nell'immagine che segue:


Salva e accertati che in STILE RIGA che tutti gli oggetti messi nella pagina dopo il separatore, dopo il content slider e dopo l'oggetto HTML,  devono avere sfondo bianco o nero a secondo del layout grafico che state progettando.
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.
Un trucco per le immagini. Cerca sempre immagini con focus centrale cioè il soggetto della foto deve essere prossimo o al centro dell'immagine scelta.

COMMENTA ▼
5.0 / 5
1 recensione
5 
1
4 
0
3 
0
2 
0
1 
0

ALFREDO P.
Domenica 27 Apr 2025
Grande Roberto....

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti