HOME - Nuovo Progetto 1

Vai ai contenuti
VIDEO SU STIKY-BAR
Semi-Trasparente
Responsive


L'utilizzo di una sticky bar semi-trasparente in discesa su un sito web può offrire diversi vantaggi, ma presenta anche potenziali svantaggi.
  1. Distrazione visiva:Una barra in discesa, se mal progettata o troppo evidente, può distrarre dall'esplorazione dei contenuti principali.
  2. Problemi di leggibilità:La trasparenza potrebbe compromettere la leggibilità, soprattutto se si sovrappone a immagini o testi complessi.
  3. Impatti sulla performance:Può aumentare il tempo di caricamento del sito, soprattutto se la barra è ricca di contenuti dinamici o animazioni.
  4. Spazio occupato:Anche se semi-trasparente, una sticky bar può ridurre lo spazio visibile per i contenuti, soprattutto su schermi piccoli.
  5. Possibile intrusività:Se la barra in discesa si comporta in modo troppo invasivo (ad esempio, appare e scompare di continuo), può risultare fastidiosa.
  6. Implementazione tecnica:Richiede un design responsive e un'implementazione tecnica accurata per evitare bug (es. sovrapposizioni scorrette o incompatibilità con browser diversi).
MATERIALE OCCORRENTE:
  • 1 Video da 1920x1280.
  • CREA UNA PAGINA DI PROVA
Sei pronto per questa avventura? Ok. Non preoccuparti. Ti elencherò passo passo come fare.
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  )


SALVA TUTTO
Sempre dal passo 2 ritorna su STRUTTURA MODELLO. Ti troverai i nuovi break-point . A partire dal primo a scendere imposta IN MODELLO come segue:
  • HEADER TUTTO A ZERO
  • Imposta Margini laterali del contenuto pagina a 5,5,0,0
  • Footer da 100px (potrai variarlo in seguito)
  • SALVA TUTTO

Procedi ora per la STIKY-BAR:
  • Vai al passo 2 MODELLO e poi su Stiky Bar
  • Vai sui vari break point della Stiky e imposta un'altezza di 100px (potrai variarla in seguito)
  • Sulla barra menù metti TRASPARENTE per tutti i break-point della stiky Bar.
  • Inserisci ora il tuo menù applicando l'oggetto menù di default. Settalo come meglio credi nelle sue impostazioni
Ora portati al passo 3 IMPOSTAZIONI - PROPRIETÀ DELLA PAGINA CREATA - CODICE. Inserisci tutto il codice che segue inserendolo "PRIMA DELLA CHIUSURA DEL TAG HEAD" . NON eliminare i crediti dell'autore del codice:

<style> body {overflow-x:hidden} </style>

<style>
/* Regola generale per il contenitore dello slider Fusione del codice di Giancarlo Web, Giuseppe Guida e Max */
#imObjectContentSlider_10 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Immagini dello slider */
.content-slider.slide-image-content {
  width: 100%;
  height: auto;
  object-fit: cover; /* Riempie senza deformarsi */
  box-sizing: border-box;
}

/* Media Query */

/* Risoluzioni >= 1680px */
@media (min-width: 1680px) {
  #imObjectContentSlider_10 {
      min-height: 650px; /* Altezza standard per risoluzioni alte */
  }
  .content-slider.slide-image-content {
      object-fit: cover; /* Copre senza tagliare */
  }
  .slide-title {
      font-size: 28px; /* Font maggiore per risoluzioni grandi */
      padding: 10px 20px;
  }
  .slide-button {
      font-size: 16px;
      padding: 10px 20px;
  }
}

/* Da 1679,9px a 1379px */
@media (max-width: 1679.9px) and (min-width: 1380px) {
  #imObjectContentSlider_10 {
      min-height: 700px;
  }
  .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_10 {
      min-height: 650px;
  }
  .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_10 {
      min-height: 550px;
  }
  .content-slider.slide-image-content {
      object-fit: contain; /* Adatta senza tagliare */
  }
  .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_10 {
      min-height: 450px;
  }
  .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_10 {
      min-height: 300px;
  }
  #imObjectContentSlider_10 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 30pt !important;
  }
}

/* Da 800px a 600px */
@media (max-width: 800px) and (min-width: 600px) {
  #imObjectContentSlider_10 {
      min-height: 200px !important;
  }
  .slide-title {
      font-size: 14px !important;
  }
  .slide-description {
      font-size: 10px;
  }
}

/* Da 719,9px a 200px */
@media (max-width: 719.9px) and (min-width: 200px) {
  #imObjectContentSlider_10 {
      min-height: 150px !important;
  }
  #imObjectContentSlider_10 > .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_10 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_10 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px;
      height: 40px;
  }
}

/* End custom code */
</style>
SALVA TUTTO. Nota bene.
Sul codice potrai notare che tra le prime righe ti ho lasciato in neretto l'identificatore di questa pagina che tu dovrai sostituire con quello tuo facendo una ricerca con ispezione codice del tuo browser chrome. Una volta individuato va cambiato per tutto il sito . In sostanza se ora è #imObjectContentSlider_10 e il tuo magari è #imObjectContentSlider_10_02 dovrai sostituire la parte _10 con _10_02
Ora devi provare la stiky bar su un content slider . SEI PRONTO?

  • Portati al passo 4 e fai doppio click sulla pagina test che hai spero già creato.
  • Inserisci nella prima cella un separatore da 90px e imposta margini esterni e interni a zero. Estendi l'oggetto sia nel progetto che nello stile riga
  • Inserisci un oggetto content slider con una altezza di 650px. I margini dovresti trovarli già a zero ma se non lo fossero procedi
ORA FERMATI!
QUANTO SEGUE VALE SOLO SE DEVI INSERIRE UN VIDEO SU CUI TI SERVE UN TITOLO E UNO SLOGAN. SE IL TUO VIDEO DISPONE GIÀ DI TITOLO O TESTI IN ANIMAZIONE NON TENERNE CONTO E PROSEGUI PER L'AGGANCIAMENTO DEGLI OGGETTI tenendo presente di non inserire nulla nel content slider come da immagine. Aggiungi si un titolo ma poi elimina la dicitura che di solito è ► NEWS.


Nel casi invece ti Titolo e slogan regolati come di seguito indicato:▼
  • Inserisci un Titolo da 48px o anche più, di seguito uno slogan da 14px e la voce CONTATTI sul pulsante che dovrà puntare alla tua vera pagina contatti.

SETUP CONTENT SLIDER
Setta gli elementi come di seguito indicato:▼

  • TITOLO margine esterno 10;10;2;2; Disposizione testo CENTRALE
  • SLOGAN margini esterni 10;10;15;15; Disposizione Testo CENTRALE
  • PULSANTE margini esterni 15;15;30;30 - Margini interni 40;40;10;10; Disposizione Testo CENTRALE sfondo Rosso.
  • IMMAGINE - NESSUNA
  • SFONDO - TRASPARENTE
  • OWERLAY PER L'OGGETTO - TRASPARENTE
  • OWERLAY SU STILE RIGA AL 40% (facoltativo o modificabile a piacere)

SALVA TUTTO
AGGANCIAMENTO DEGLI OGGETTI
Ora aggancia in struttura riga il separatore e il content slider dandogli la massima estensione. Tra le opzioni colore scegli VIDEO e inserisci IL TUO VIDEO E UNA TUA IMMAGINE DI COPERTINA
(immagine a titolo di esempio)



Vai ora al Passo 1, seleziona CODICE E STATISTICHE
INSERISCI TUTTO IL CODICE CHE SEGUE
Prima della chiusura del Tag HEAD
<style>
/* credit by Giuseppe Guida */
#imStickyBarGraphics {
transition: 1s!important;
}
#imStickyBarContainer {
transition: 1s!important;
}

#imStickyBarGraphics.myStickyBar {
background-color: rgba(0, 0, 0, 0.8) !important;
opacity: 1 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#cookie-law-message .imCloseInn {
font-size: 18px !important;
display: inline-block;
padding: 15px 50px !important;
}
</style>

<script>
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#imStickyBarGraphics').addClass('myStickyBar');
} else {
$('#imStickyBarGraphics').removeClass('myStickyBar');
}
});
</script>
SALVA TUTTO. Prova ora il risultato del tuo lavoro. IL VIDEO di testa è stato realizzato con questo esempio
Torna ai contenuti