sito in parallax responsive

[Chandler]

Ciao Mattia,
sto realizzando QUESTO sito in parallax. Non so dirti di preciso se solo per la parte di gestione CMS o se per tutto il sito, si è partito dalla base del framework bootstrap per poter rendere il sito responsive.
La problematica che riscontro adesso con gli sviluppatori è la responsività da versione estesa (per mac/pc) a versione mobile... ovvero ci sono difficoltà a passare dalla parte in parallax (che dovrebbe avere dei parametri fissi) a quella mobile (che invece perde il parallax e funziona a blocchi). Loro pensano di risolvere la cosa mantenendo due template diversi (quello per pc/mac e quello mobile) che vengono visualizzati a seconda del device che visualizza il sito, io invece vorrei fare in modo che sia totalmente responsive com'è per fiorucci. Ovvero che quando il browser è esteso è in parallax, quando lo si stringe diventa "semplice". Dici che è una cosa fattibile? Suggeriresti qualche tipo di soluzione/opzione?

[Mattia]

Per prima cosa devi attivare il parallax solo quando il sito viene visualizzato da un dispositivo con una risoluzione maggiore di uno smartphone (480 pixel di larghezza).
Quindi puoi modificare il codice dove inizializzi Stellar.js in questo modo:

Codice:

if ($(window).width() > 480) {
    $.stellar({
        'horizontalScrolling': false,
        'verticalOffset': 50,
        'responsive': true
    });
}

[Chandler]

Ciao Mattia,
riapro la questione responsive.
Attualmente gli sviluppatori hanno fatto due template, uno parallax per pc e l'altro mobile per gli smartphone. Come da topic, lo scopo è fare un unico template adattavo. Mi avevi accennato che si può fare utilizzando le media query per le cose diverse in CSS. Verificando le diversità in JavaScript con $(window).width().
Puoi farmi un esempio o linkarmelo?


Grazie
Chand

[jimmyfm]

Per prima cosa devi attivare il parallax solo quando il sito viene visualizzato da un dispositivo con una risoluzione maggiore di uno smartphone (480 pixel di larghezza).

Il problema è che per fare il sito mobile e desktop abbiamo avuto direttive radicalmente diverse quindi abbiamo implementato in buona sostanza due siti e quindi abbiamo dell'html diverso a seconda della versione del sito.

L'esempio che hai fatto resta valido in questo caso e con l'impossibilità di unificare l'hml?

[Mattia]

Mi avevi accennato che si può fare utilizzando le media query per le cose diverse in CSS.

Puoi trovare degli esempi di utilizzo delle media query in base alla risoluzione del browser in questa guida.

Verificando le diversità in JavaScript con $(window).width().

Un esempio di JavaScript è quello che ho scritto in questo messaggio.

L'esempio che hai fatto resta valido in questo caso e con l'impossibilità di unificare l'hml?

Se il codice HTML è lo stesso tra versione mobile e versione desktop, questo codice funziona correttamente, perché eseguirà l'effetto parallax solo nel caso la larghezza della risoluzione del browser sia superiore a 480 pixel.

[jimmyfm]

L'esempio che hai fatto resta valido in questo caso e con l'impossibilità di unificare l'hml?

Se il codice HTML è lo stesso tra versione mobile e versione desktop, questo codice funziona correttamente, perché eseguirà l'effetto parallax solo nel caso la larghezza della risoluzione del browser sia superiore a 480 pixel.

La tua risposta è stata chiarissima, il fatto di avere due pezzi di codice radicalmente diversi per mobile e parallax rende impossibile qualsiasi operazione.

Negli ultimi giorni ho anche provato a metterli insieme anzichè limitarmi a mostrare l'uno o l'altro tramite delle media query ma l'impianto delle due visualizzazioni è radicalmente diverso e non vedo possibilità di unificarli.
Hai esperienze/consigli per casi del genere?

[Chandler]

Aggiungo che nonostante dal browser (stringendo la finestra) vedo la versione mobile, da smartphone vedo solo la versione parallax... cosa abbiamo sbagliato?

[Mattia]

Negli ultimi giorni ho anche provato a metterli insieme anzichè limitarmi a mostrare l'uno o l'altro tramite delle media query ma l'impianto delle due visualizzazioni è radicalmente diverso e non vedo possibilità di unificarli.
Hai esperienze/consigli per casi del genere?

Forse la cosa migliore è iniziare con la versione mobile del sito e cercare di aggiungere le funzionalità visive per la versione desktop prima tramite CSS e poi, se necessario, tramite JavaScript.

Aggiungo che nonostante dal browser (stringendo la finestra) vedo la versione mobile, da smartphone vedo solo la versione parallax... cosa abbiamo sbagliato?

Per qualsiasi risoluzione vengono inclusi sia il file CSS per la versione mobile che per quella desktop.

[jimmyfm]

Negli ultimi giorni ho anche provato a metterli insieme anzichè limitarmi a mostrare l'uno o l'altro tramite delle media query ma l'impianto delle due visualizzazioni è radicalmente diverso e non vedo possibilità di unificarli.
Hai esperienze/consigli per casi del genere?

Forse la cosa migliore è iniziare con la versione mobile del sito e cercare di aggiungere le funzionalità visive per la versione desktop prima tramite CSS e poi, se necessario, tramite JavaScript.

Questa è una non-risposta, comunque alla fine sto adottando l'approccio di buttare al vento la versione mobile che abbiamo fatto e ripartire dal mobile per sviluppare un template responsivo.

[Mattia]

Negli ultimi giorni ho anche provato a metterli insieme anzichè limitarmi a mostrare l'uno o l'altro tramite delle media query ma l'impianto delle due visualizzazioni è radicalmente diverso e non vedo possibilità di unificarli.
Hai esperienze/consigli per casi del genere?

Forse la cosa migliore è iniziare con la versione mobile del sito e cercare di aggiungere le funzionalità visive per la versione desktop prima tramite CSS e poi, se necessario, tramite JavaScript.

Questa è una non-risposta, comunque alla fine sto adottando l'approccio di buttare al vento la versione mobile che abbiamo fatto e ripartire dal mobile per sviluppare un template responsivo.

Sarà stata una "non-risposta", ma alla fine è quello che hai fatto...