Parallasse - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
PARALLASSE
Progetto FREE
RESPONSIVE 100%




Prestazioni
Su dispositivi mobili e tablet: L'effetto parallasse può avere un impatto negativo sulle prestazioni, soprattutto sui dispositivi con hardware meno potente. Disabilitandolo a queste risoluzioni, si migliora il rendering e si evita di sovraccaricare il browser.
Riduzione dei glitch grafici: Alcuni browser (soprattutto quelli mobile) gestiscono male il parallasse con immagini di sfondo, causando problemi di scorrimento o un'esperienza visiva non uniforme. L'ESEMPIO CORRENTE SI BASA SU UNA STRUTTURA PREDEFINITA CON SFONDO NERO IN  PROPRIETÀ GRAFICHE ED ELIMINAZIONE PARALLASSE A PARTIRE DALLA RISOLUZIONE 720px QUINDI LA FASCIA LAPTOP PIU' PICCOLI O SCHERMI MENO RECENTI. Di seguito l'esempio concreto adattato al 100% cosa impossibile da ottenere con le funzioni di base di incomedia ®


ESEMPIO
Parallasse infinito


Nell'esempio corrente il parallasse è stato applicato in mezzo al contenuto della pagina ma supponendo che tu lo voglia fin dall'inizio procedi come segue:

PARALLASSE SU SFONDO NERO/BIANCO ▼

Vai sulla tua pagina test in struttura e Inserisci un separatore all'inizio da 160px e imposta i margini interni ed esterni tutti a zero
Inserisci ora un oggetto testo con un titolo da 32px e uno slogan da 14px
Inserisci di seguito un altro separatore da 160px e imposta i margini interni ed esterni tutti a zero
Vai su STILE RIGA e aggancia tra loro i tre oggetti ed estenderli in larghezza.





Sempre su stile riga, a destra tra le opzioni colore ,scegli IMMAGINE e carica una tua immagine da 1280x853px.▲
Vai sull'icona parallasse e setta "PARALLASSE FISSO" E metti un owerlay al 40%


Se vuoi provare con l'immagine dell'esempio basta scaricartela sul tuo pc con il tasto destro del muouse.
▼


Ora vai al passo 3 - MAPPA - seleziona con un click la tua pagina test e doppio click in alto su proprietà



Ora vai su ESPERTO. ▼


Inserisci tutto il codice che segue. ▼ PRIMA DELLA CHIUSURA DEL TAG HEAD ▼
Dovrai anche avere cura di cambiare il nome del file che utilizzerai come tua immagine cambiandola con quella del codice che ti ho messo in rosso.


CODICE DA INSERIRE
<!--* Contenitore div custom by Max 2025 losmanettone.it - posizione relativa -->
<div id="imPageRow_2" class="imPageRow imParallax">
 <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
   <div id="imPageRowGraphics_2"
    class="imParallaxBackground"
    data-parallax-direction="fixed"
    data-parallax-zoom="140"
    style="background-image: url('lion-3099986_1280.jpg'); height: 120vh; background-size: cover; background-position: center;">
 </div>
 </div>
</div>

<style>

/* Contenitore principale con posizione relativa */
#imPageRow_2 {
 position: relative;
}

/* Stile base per l'immagine di sfondo con effetto parallasse */
#imPageRowGraphics_2 {
 background-color: #000 !important; /* Colore bianco per eliminare le strisce ai 590px */
 background-size: cover !important; /* Copre l'intero contenitore */
 background-position: center !important; /* Centra l'immagine */
 background-repeat: no-repeat !important; /* Evita ripetizioni */
 background-attachment: fixed !important; /* Effetto parallasse */
 height: 100vh !important; /* Altezza pari alla viewport */
 width: 100vw !important; /* Usa 100vw per occupare tutta la larghezza del viewport */
 margin: 0; /* Elimina eventuali margini */
 padding: 0; /* Elimina eventuali padding */
 box-sizing: border-box; /* Assicura che padding e bordi siano inclusi */
 
}

/* Media query per risoluzioni tra 961px e 1200px */
@media (max-width: 1200px) and (min-width: 961px) {
 #imPageRowGraphics_2 {
   height: 80vh !important; /* Riduce l'altezza */
   background-attachment: fixed !important; /* Mantiene l'effetto parallasse */
   margin: 0 auto; /* Centra il contenitore */
   left: 0; /* Elimina offset indesiderati */
 }
}

/* Media query per risoluzioni tra 721px e 960px */
@media (max-width: 960px) and (min-width: 721px) {
 #imPageRowGraphics_2 {
   height: auto !important; /* Altezza adattabile */
   min-height: 150px !important; /* Altezza minima */
   background-size: contain !important; /* Assicura che l'immagine non venga tagliata */
   background-position: center !important;
   width: 100vw !important; /* Assicura larghezza completa */
   background-attachment: scroll !important; /* Disabilita l'effetto parallasse */
 }
}

/* Media query per risoluzioni tra 481px e 720px */
@media (max-width: 720px) and (min-width: 481px) {
 #imPageRowGraphics_2 {
   height: auto !important; /* Altezza adattabile */
   min-height: 150px !important; /* Altezza minima */
   background-size: contain !important; /* Assicura che l'immagine non venga tagliata */
   background-position: center !important;
   width: 100vw !important; /* Assicura larghezza completa */
   background-attachment: scroll !important; /* Disattiva parallasse */
 }
}

/* Media query per risoluzioni tra 480px e 599.9px */
@media (max-width: 599.9px) and (min-width: 480px) {
 #imPageRowGraphics_2 {
   height: auto !important; /* Altezza adattabile */
   min-height: 150px !important; /* Altezza minima per mantenere visibilità */
   background-size: contain !important; /* Assicura che l'immagine non venga tagliata */
   background-position: center !important; /* Centra l'immagine */
   background-repeat: no-repeat !important; /* Evita ripetizioni */
   background-attachment: scroll !important; /* Disattiva parallasse */
   width: 100vw !important; /* Larghezza completa */
 }
}

/* Media query per risoluzioni fino a 480px */
@media (max-width: 480px) {
 #imPageRowGraphics_2 {
   height: auto !important; /* Altezza automatica */
   min-height: 150px !important; /* Altezza minima per contenere l'immagine */
   background-size: contain !important; /* Assicura che l'immagine non venga tagliata */
   background-position: center center !important; /* Centra l'immagine */
   background-repeat: no-repeat !important;
   background-attachment: scroll !important; /* Disattiva parallasse */
   width: 100vw !important; /* Assicura larghezza completa */
 }
}

/* Stile per il testo all'interno del contenitore su mobile */
@media (max-width: 600px) {
 .fs48lh1-15.cf1,
 .fs48lh1-15.cf2 {
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   text-align: center;
   width: 90%; /* Evita che il testo si espanda oltre il bordo */
   color: white;
 }
}

</style>
NOTA QUESTI SONO GLI ELEMENTI CHE DOVRAI SOSTITUIRE CON I TUOI:
.fs48lh1-15.cf1
.fs48lh1-15.cf2
imPageRow_2
#imPageRowGraphics_2

Potrebbe essere possibile che tu te li ritrovi già uguali sull'ispezione.

Ti ho lasciato In neretto l'lD che dovrai cambiare con il tuo che trovi lanciando chrome e poi tasto destro ISPEZIONA. Se non metti il tuo ID questo esempio non potrà funzionare.



Una volta fatto tutto salva e prova in anteprima o in locale sul browser simulando anche le varie risoluzioni di restringimento.
PRO
  • Effetto garantito su PC e Notebook
  • Responsive 100%

CONTRO
  • DIFFICOLTA' ALTA.Bisogna essere degli smanettoni.
  • Si perde parecchio tempo a cercare una immagine giusta.
  • Effetto non indicato per Tablet o cellulari. Se pensate che altri CMS danno questa possibilità vi sbagliate di grosso.
  • listato e codice realizzato solo per sfondi NERI
COMMENTA ▼
Non sono presenti ancora recensioni.
5 
0
4 
0
3 
0
2 
0
1 
0

Crediti

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

Torna ai contenuti