Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Ridimensionamento sfondi con parallax
#1
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.
Cita messaggio
#2
Nella documentazione di Stellar.js è spiegato che si può utilizzare un parametro per i siti responsive.

Al posto di:
Codice:
$.stellar();

Devi mettere:
Codice:
$.stellar({
    'responsive': true
});
Mattia!
Cita messaggio
#3
Adesso si che funziona!! Big Grin

Grazie
Cita messaggio
#4
ciao Mattia,
per il ridimensionamento, basta mettere il background fixed ?
Cita messaggio
#5
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).
Mattia!
Cita messaggio
#6
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?
Cita messaggio
#7
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,
Mattia!
Cita messaggio
#8
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
Cita messaggio
#9
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'
Mattia!
Cita messaggio
#10
ho segnalato questa soluzione, grazie mille!

Tu che soluzione utilizzeresti invece??

Chand
Cita messaggio
#11
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.
Mattia!
Cita messaggio
#12
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...
Cita messaggio
#13
Mi faresti un esempio di come andrebbe creato il plugin per Stellar.js?

Grazie
Cita messaggio
#14
Puoi trovare qui alcuni esempi per creare dei plugin per Stellar.js.
Mattia!
Cita messaggio
#15
è che non abbiamo idea di come fare! Sad
lo sviluppatore non è in gradi di creare il plugin come da te illustrato.
Cita messaggio
#16
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.
Mattia!
Cita messaggio
#17
Vabbè, tentar non nuoce... :
mi faresti un esempio di plugin per stellar.js?

Grazie
Cita messaggio
#18
Puoi vedere l'esempio nel link che ti ho scritto in un messaggio precedente. Hai provato a utilizzare la soluzione del mio ultimo messaggio?
Mattia!
Cita messaggio
#19
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
Cita messaggio
#20
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.
Mattia!
Cita messaggio
#21
le immagini non sono grandi (come kb, dunque non sarebbe un problema), per me l'ideale sarebbe che funzionasse esattamente come fiorucci.it
Cita messaggio
#22
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 */
    }
}
Mattia!
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  sito in parallax responsive Chandler 9 52.631 27/06/2014 12:18
Ultimo messaggio: Mattia

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)