Ciao Mattia,
per lo stesso progetto dei rollover ho l'esigenza di fare in modo che il sito in parallax sia in responsive. Ho particolari difficoltà a far ridimensionare gli sfondi mantenendo l'effetto di scollamento parallax. Non riesco ad applicare
background-size:cover nel
css dato che perdo l'effetto di movimento del background tipico del parallax. Anche l'uso di js da qualche problema, perché comunque l'immagine di bg deve essere un po' più larga della dimensione della finestra in modo da potersi muovere. Per adesso l'immagine di background rimane sempre centrata.
QUI puoi vedere quello che sto facendo, ma da un macbook (o da un qualsiasi portatile) vedo 1/4 dell'immagine dato che non viene scalata.
Nella
documentazione di Stellar.js è spiegato che si può utilizzare un parametro per i siti responsive.
Al posto di:
Devi mettere:
Codice:
$.stellar({
'responsive': true
});
Adesso si che funziona!!
Grazie
ciao Mattia,
per il ridimensionamento, basta mettere il background fixed ?
fixed è un valore della proprietà background-attachment di CSS (con fixed lo sfondo resta fermo anche se si scorre la pagina, mentre con scroll, che è il valore di default, lo sfondo scorre insieme alla pagina).
Forse tu intendi utilizzare la proprietà background-size che, oltre a dar la possibilità di dare una dimensione con le varie unità di misura allo sfondo, permette di ridimensionare un'immagine di sfondo in base al suo contenitore. Le due proprietà da utilizzare sono contain (lo sfondo viene ridimensionato in modo da starci tutto) o cover (lo sfondo viene ridimensionato in modo da occupare tutto l'elemento).
Per ridimensionare le immagini abbiamo usato la proprietà background-size: cover;
Il problema è che l'effetto di movimento del background è ottenuto spostando (a livello javascript) la posizione del background, quindi quello che avviene è che l'immagine ha la dimensione del blocco, ma è traslata più in basso e quindi si vede una banda di background senza immagini (che poi scompare mentre si fa lo scroll). Quindi il problema è che quando scala si vedono queste immagini bianche sullo scroll.
Dici che si può risolvere?
Nella versione online non vedo il problema, perché non hai caricato la versione aggiornata. Comunque potresti provare a togliere la configurazione relativa allo spazio verticale.
Codice:
verticalOffset: 50,
Ciao Mattia,
ho uppatto la versione col problema
QUI ,il problema è evidente a 1280
Fammi sapere, grazie
p.s. lo sviluppatore aveva già provato a togliere
vertical offset per vedere se fosse stato quello il problema ma non ha funzionato
Ho dato uno sguardo veloce, ma sono abbastanza sicuro che il problema sia dato dal fatto che i
div con gli sfondi vengano ridimensionati alla grandezza della finestra del browser. Quindi, visto che lo sfondo è della dimensione del
div, appena viene spostato in alto lascia un po' di spazio bianco.
Facendo qualche ricerca, mi sembra che qualcuno suggerisca di utilizzare, ma non mi sembra la soluzione corretta:
Codice:
'scrollProperty': 'transform'
ho segnalato questa soluzione, grazie mille!
Tu che soluzione utilizzeresti invece??
Chand
Se non funziona quella soluzione, dovresti creare un plugin per Stellar.js che ridimensioni lo sfondo leggermente più grande di quello che farebbe il cover in modo che, anche nel caso che venga spostato, copra tutto il div.
Difatti lo sviluppatore dice che anche secondo lui non è la dimensione corretta. Cmq i div non vengono ridimensionati, è il background che viene ridimensionato. i div hanno altezza minima 1080...
Mi faresti un esempio di come andrebbe creato il plugin per Stellar.js?
Grazie
Puoi trovare
qui alcuni esempi per creare dei plugin per Stellar.js.
è che non abbiamo idea di come fare!
lo sviluppatore non è in gradi di creare il plugin come da te illustrato.
Forse si riesce a utilizzare il solo CSS senza creare nessun plugin. A
background-size puoi assegnargli il valore "auto 120%". Con
auto viene calcolata la larghezza in base all'altezza e l'altezza dovrebbe essere il 120% dell'altezza del
div che lo contiene.
P.S.: Proprio oggi ho letto
questo articolo che dice di evitare il
background-size: cover per i siti in parallasse.
Vabbè, tentar non nuoce... :
mi faresti un esempio di plugin per stellar.js?
Grazie
Puoi vedere l'esempio nel link che ti ho scritto in un messaggio precedente. Hai provato a utilizzare la soluzione del mio ultimo messaggio?
lo sviluppatore ha provato ma nada! Entrambe le soluzioni non funzionano. Lui dice che probabilmente la cosa più veloce da fare è fare più immagini di background a varie dimensioni e scambiarle in funzione della risoluzione usando le css media query
Io non sono d'accordo, tu che ne pensi?
Vorrei capire il discorso del plugin dello stellar perché mi sembra la soluzione più ottimale
A dir la verità, la soluzione con le media query è la migliore dal lato dell'utente, perché non dovrebbe scaricare un'immagine troppo grande inutilmente.
le immagini non sono grandi (come kb, dunque non sarebbe un problema), per me l'ideale sarebbe che funzionasse esattamente come fiorucci.it
La soluzione con le media query è migliore, perché è una funzione integrata nel browser e più veloce da eseguire rispetto a una funzione JavaScript.
Comunque, se non vuoi creare delle immagini diverse per gli sfondi (in totale il sito in versione mobile pesa 2,7 MB), con le media query puoi semplicemente impostare dimensioni diverse dello sfondo utilizzando sempre la stessa immagine.
Esempio:
Codice:
#box {
background-image: url("/images/background_box.jpg");
}
@media screen and (max-width: 480px) {
#box {
background-size: 500px; /* Larghezza dell'immagine che naturalmente va modificata in base alle proprie esigenze; l'altezza viene calcolata in automatico */
}
}
@media screen and (max-width: 800px) {
#box {
background-size: 850px; /* Larghezza dell'immagine che naturalmente va modificata in base alle proprie esigenze; l'altezza viene calcolata in automatico */
}
}