Effetto parallasse non funzionante con browser Firefox 
Author: Fuoco E.
Visited 1541,
Followers 1,
Shared 0
Salve, ho impostato un effetto parallasse su una riga con sfondo ripreso da un video Youtube (fuoco-edizioni.it) il problema nasce con la visualizzazione attraverso Firefox 85.0.2 che al contrario degli altri browser non fa scorrere le immagini del video ma si blocca su un frame. Come risolvere secondo voi? Grazie per tutto l'aiuto
Posted on the
Ciao, quale sarebbe la pagina del sito?
Author
Ciao, la pagina è la home di www.fuoco-edizioni.it
FireFox 85.0.2 se il video è quello in bianco e nero io lo vedo
Author
A me su Firefox è visibile soltanto un'immagine fissa del video, se per voi è invece visibile il video che scorre e l'effetto parallasse allora sarà un problema di cache. Grazie mille
Author
Problema purtroppo non risolto, ho visuallizzato il sito su altri pc e Firefox da sempre lo stesso problema. Su Edge e Safari invece è ok.
...!... tenere presente che nelle recenti versioni di alcuni noti browser non funziona più l'Autoplay, che viene inibito per convenzione presa, esattamente come avviene da sempre sui dispositivi "mobile"...!...
...(...per gli esperti in EXTRA l'unica alternativa sta in TUBOLAR o nelle API di YT su cui documentarsi...)...
... comunque sia, il video di sfondo sarebbe sempre meglio da evitare in ogni caso; ...meglio una presentazione animata leggera, tanto che come sfondo ovviamente non possono dar resa in presenza di altri oggetti...
.
A volte parte e a volte no.
O.T.: Hai il menù che esce in larghezza e obbliga ad usare lo scroll orizzontale, con la versione PRO puo fare l'analisi del sito al passo 5 dove ti dice su quale breakpoint devi agire e su quale oggetto.
Author
D'accordo, grazie per l'utile consiglio. Il fatto che mi sarebbe piaciuto dare un effetto moderno al sito e lo scorrimento parallasse mi sembrava un'ottima soluzione, per cui mi serviva un immagine/video di sfondo che con lo scroll desse questo effetto.
Author
Buongiorno, qualche suggerimento per il problema relativo all'effetto parallasse? Grazie mille
... se non relativamente a quel che è stato detto, penso che non dovrebbero esserci problemi...
... attualmente non vedo video di sfondo...
.
Author
Grazie mille per la risposta. Il video l'ho eliminato perchè in un post precedente mi hai gentilmente consigliato di evitare di inserirlo, era giusto per sapere se è riscontrato che con Website vi siano problemi di compatibilità con Firefox a tal proposito.
... non penso, ...sarebbe la prima volta per quel che ne so, ...a meno che non sia emerso con l'ultima versione, che nel caso sarebbe la prima segnalazione per me...
... per lo sfondo puoi usare la dissolvenza immagini nello stile delle righe, tipo slideshow, più compatibile di qualsiasi video e non sfigurerebbe con il video che avevi usato, e senza problemi di banda e connessioni...
ciaao
.
Author
Gentile KolAsim, grazie per le sempre puntuali risposte. Applicherò senz'altro il tuo consiglio. Comunque per la questione video in parallasse, ti confermo che era visibile con Edge, ma non con Firefox dove invece rimaneva bloccato su una singola immagine.
... mi pare che lo avevo visto lo sfondo YT con il mio Ff ...
... se ti interessa potresti provare con > VEGAS ...per sfondi animati leggeri...
.
Author
Gentile KolAsim, ho dato un'occhiata a Vegas e l'effetto mi pare ottimo vedendo la demo, purtroppo non sono riuscito a capire come utilizzarlo, ho scaricato il software ma non sono riuscito ad installarlo, qualche suggerimento? Grazie mille!!!
scusa potresti creare una pagina nascosta con il video in parallasse e poi mettere qui il link della pagina...
così si fa una verifica con Firefox...
... se conosci bene il programma, potresti usare le opzioni per gli allegati e quindi le path relative...
... comunque, anche se io non ho il programma, e per tagliare la testa al toro semplificando al massimo usando i files dalla fonte, e derivato dai miei vecchi ed unici! esperimenti, ...incolla semplicemente questo codice in un Oggetto Codice HTML qualsiasi della pagina, va bene anche di un solo pixel (1*1px), e poi vedrai che capirai da te:
<!-- author: Jay Salvat, Email: jay.salvat[at]gmail.com, Twitter: @jaysalvat; Location: Sophia-Antipolis, France; https://vegas.jaysalvat.com/ -->
<link rel="stylesheet" href="https://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="https://jaysalvat.github.io/vegas/releases/latest/vegas.min.js"></script>
<script>
$("#example, body").vegas({
animation: 'random',
slides: [
{src: "https://cdn.pixabay.com/photo/2016/11/06/22/58/horse-1804425__340.jpg"},
{src: "https://cdn.pixabay.com/photo/2018/08/16/00/13/horse-3609347__340.jpg"},
{src: "https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889__340.jpg"},
{src: "https://cdn.pixabay.com/photo/2018/10/22/17/24/horse-3765847__340.jpg"}
]});</script>
.............................
... ovviamente per me! la massima flessibilità si otterrebbe con il mio storico ed universale DIV_CUSTOM+IFRAME, con pagina VEGAS esterna...
... se poi scarichi e posizioni i files vegas.min.css e vegas.min.js nel tuo sito, sarebbe meglio per non dipendere dal collegamento al sito di Vegas; ...valuta un po' tu...
.
Author
Ciao, confermo l'incompatibilità di Firefox con i video caricati con l'effetto parallasse del programma. Gli altri browser invece, compreso Safari, visualizzano correttamente l'impostazione. Comunque, come consigliato da KolAsim, ho provveduto ad sostituire il video ripreso da Youtube con dissolvenze immagini in stile righe.
... visto, e con la dissolvenza è quasi meglio del video che avevi usato...
... può esserti utile sapere che la pagina è appesantita da oltre 17 MB per immagini di peso e misure eccessive...
... per esempio questa: Our-location-wide (4560x2611) - 1.56 MB...
... dovresti cercare di stare con misure al disotto di 1900x1600 (16:9), o 1800x1350 (4:3), o 1900x1200 (3:2)
... e con peso max sotto i 200-300 KB c.u.
... si migliorerebbe di parecchio la navigazione...
.
ciao
.
Author
Ciao, grazie mille per il feedback, strano mi ero accorto del problema relativo alle immagini è ho eseguito la modifica per ridimensionarle ed alleggerirle, non capisco allora perchè ancora adesso permangano le immagini pesanti!!!
... ho rivisto; ...hai già fatto un buon repulisti alleggerendo di circa 5 MB un valore notevole...
... adesso lo slideschow di sfondo della prima riga si avvia quasi subito nello smartphone; prima ci voleva quasi un minuto...
... ma ci sono nel complesso circa 13 MB su cui potresti ulteriormente lavorare...
... per esempio, questa immagine "Copertina_Cucina_Lazio.png" (463x972) pesa ben 1 MB! ... al massimo dovrebbe pesare 100-200 KB, circa 1/6° in meno...
... se non ti servono per particolari ed importanti dettagli grafici, evita per quanto possibile il formato PNG in favore del JPG, adatto per formati fotografici, ed anche misure ridotte aiuterebbero nel complesso
... se ti interessa, piano piano ed un passo alla volta, potresti portarti avanti come hai appena fatto...
... nel caso buon lavoro...
.
Author
Grazie sempre per i tuoi gentili e puntuali suggerimenti!!! Buon lavoro anche a te!!!