HOME - Nuovo Progetto 1

Vai ai contenuti
STIKY-BAR
Trasparente con discesa semi-trasparente
STIKY-BAR
Trasparente con discesa semi-trasparente
STIKY-BAR
Semi-Trasparente


L'utilizzo di una sticky bar semi-trasparente in discesa su un sito web può offrire diversi vantaggi, ma presenta anche potenziali svantaggi. Ecco una panoramica dei pro e contro:
Pro:
  1. Accessibilità costante ai contenuti o alle funzioni principali: Una sticky bar permette agli utenti di avere sempre a disposizione pulsanti importanti, come il menu, la barra di ricerca, il carrello, o pulsanti di contatto.
  2. Design moderno e accattivante:La trasparenza può rendere il sito visivamente più elegante, lasciando intravedere i contenuti sottostanti.
  3. Esperienza utente migliorata:Offre una navigazione fluida e immediata, particolarmente utile per siti con molte sezioni o per dispositivi mobili.
  4. Riduzione della frustrazione:Gli utenti non devono scorrere indietro per accedere a funzioni essenziali, migliorando il tasso di interazione.
  5. Possibilità di branding e promozioni:Una sticky bar può contenere call-to-action (CTA), annunci promozionali, o il logo aziendale, mantenendoli visibili.
Contro:
  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).
Best Practice per massimizzare i pro e minimizzare i contro:
  • Evitare la trasparenza eccessiva: Usare un livello di trasparenza adeguato per mantenere leggibilità e visibilità.
  • Testare su più dispositivi: Verificare che la barra sia funzionale e non troppo invasiva su desktop e mobile.
  • Ottimizzare le prestazioni: Assicurarsi che il caricamento della barra non rallenti il sito.
  • Ridurre l'invadenza: Progettare animazioni fluide e non intrusive per la discesa.
  • Inserire solo elementi essenziali: Limitare i contenuti della barra per evitare il sovraccarico visivo.
MATERIALE OCCORRENTE:
  • 2 o più immagini da 1280x620. Il focus delle immagini deve essere sempre centrale. Immagini con persone,volti od oggetti posti lateralmente verranno inesorabilmente tagliati o troppo adattati.
  • 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 1 IMPOSTAZIONI e POI su STATISTICHE E CODICE e, infine, su ESPERTO. 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 3 MAPPA 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
  • 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.

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%

SALVA TUTTO
Ora aggancia in struttura riga il separatore e il content slider dandogli la massima estensione. Tra le opzioni colore scegli SEQUENZA IMMAGINI A TEMPO e inserisci le due immagini da 1280x620px
(immagine a titolo di esempio)

Vai ora al Passo 3, seleziona la tua pagina e poi vai su proprietà


Poi vai su ESPERTO


Prima della chiusura del Tag HEAD inserisci questo codice:
<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.
ATTENZIONE.Se si volesse questo effetto per tutto il sito, il codice per la stiky bar a discesa va messo IN "CODICE E STATISTICHE" AL PASSO 1
Torna ai contenuti