Parallasse fisso smartphone 
Author: Ettore P.
Visited 1487,
Followers 1,
Shared 0
Buon pomeriggio, ho letto in altriche il parallasse fisso non funziona su smartphone.
Ho letto anche alcuni codici extra postati da Kolasim.
Io avrei la necessità di rendere fisse anche su smartphone delle immagini che su PC vengono visualizzate col parallasse fisso, è posibile con codice extra?
Non sto parlando di una immagine sfondo pagina, sto parlando di immagini che si trovano come sfondo in alcuni grupi di celle e che vorrei fossero fisse come nella visualizzazione su PC o similari....
Kola, hai un codice? Occorre sapere quali sono le celle in questione?
Posted on the
... attualmente, non avendo strumenti, con i miei codici si potrebbe tentare di ottenere un para-parallasse fisso per lo sfondo della pagina, o della prima immagine della pagina...
... per poter valutare mi servirebbe vedere un LINK con le caratteristiche dette...
.
Author
Certamente Kola :)
Ecco un link:
https://www.ettorepoggipollini.com/minha-janela-feat-silvia-pirani.html
Quasi tutte le immagini di sfondo dovrebbero almeno restare fisse su smartphone, anche quella del footer (end page) .....
Una volta capito il concetto e come intervenire, poi mi arrangio ;)
che io sappia il parallasse su mobile era stato eliminato da qualche versione, quindi devono essere fisse.
infatti Ettore io le tue immagini sulle row in Home che su PC sono in parallasse su smartphone le vedo fisse.
Author
Si Giancarlo, avevo già letto del fatto che il parallasse su mobile fosse stato eliminato, purtroppo.
Spero in qualche codice extra per avere almeno l'immagine fissa, magari identificando la cella o il gruppo di celle in questione ed assegnando loro un codice extra da inserire prima della chiusura del tag head, nel codice extra del progetto o della pagina in questione....
scusa Ettore forse non ho capito io, ma l'immagine c'è sulla ROW ed è fissa...
Author
Ciao Giancarlo, riferendosi sempre al link che ho postato precedentemente, vorrei che l'immagine di sfondo iniziale, quella dove c'è il tramonto e Silvia restasse fissa anche su smartphone.
Stesso discorso per l'immagine di sfondo del footer, dovrebbe restare fissa invece di scorrere .
... no! ...il mio codice esclusivo (tra altre mie varianti) è riservato alle sezioni anticipate prima, ... anche perchè come detto sono senza strumenti per inventare altro per ora...
... ho ricevuto diversi riscontri positivi anche per quelli con gli ostici i(!)...!...
... si attiva sotto i 720 pixel (se preferisci diminuire cambia 719px con 479px)...
... il mio codice, relativo alla pagina che hai linkato, va inserito in questa sezione:
> Passo 3 - Mappa > Proprietà Pagina > Sezione Esperto | ▪Codice personalizzato: > 3^opzione - Prima della chiusura del tag HEAD:
<style>
@media (max-width: 719px) {
#imPageRowGraphics_3 { background:transparent url('') !important }
#imPageExtContainer{ background-color:transparent !important}
html{ background: url('https://www.ettorepoggipollini.com/images/silvia-pirani-mix2.jpg') !important ;
background-position: center center !important; background-repeat: no-repeat !important;
-webkit-background-size: cover !important; -moz-background-size: cover; -o-background-size: cover !important; background-size: cover !important; background-attachment: fixed !important;}}
</style>
.
... attenzione! ...prima di proseguire, hai del codice EXTRA inserito in sezione HEAD, errata! ...quindi da correggere la pagina per regolarizzarla; ...(.. a parer mio quel codice andrebbe nella sezione body...)...
.
Author
Ciao Kola, hai ragione!
1) Il codice extra che vedi è quello del menu overlay e l'ho inserito nella sezione head perchè diversamente l'hamburger non è cliccabile. Probabilmente è una questione di Z-index, devo trovare il modo di metterlo ad un livello superiore agli altri, proverò.
Quando apro una pagina compaiono per qualche istante, in alto a sinistra, le voci del menu overlayi n formato html, probabilmente proprio perchè il codice html del menu (le voci) sono inserite nell'head invece che nel body come dovrebbero.
Approfitto per chiederti: Le voci del menu extra posso inserirle nella sezione "proprietà del body" o è meglio inserirle "dopo il tag body) ?
2) Vado a sperimentare il tuo codice adesso, ti aggiorno, per il momento grazie mille per tutto. A dopo.
... prova nelle più corrette >> 5^ > Dopo l'apertura del tag BODY ... o 6^ > Prima della chiusura del tag BODY
.
Author
Ciao Kola, ho già provato a inserire il codice sia prima che dopo l'apertura del tag body (come infatti dovrebbe essere) ma non si apre l'overlay oppure si apre ma ad un livello (z-index) inferiore.
Può essere che l'overlay si apra ma non si veda perchè coperto da altri oggetti-immagini-pagine che stanno ad uno z-index superiore....
--- oppure è proprio l'hamburger che, ance se cliccato, non apre l'overlay...
Nel file css del menu ho provato ad aumentare di molto lo z-index ma non cambia nulla. Anzi, se lo diminuisco, la sticky bar copre l'hamburger....
Riguardo al tuo codice extra per l'immagine fissa, funziona.
Mi sembra però che equivalga all'opzione di mettere uno sfondo fisso nella pagina, dalla sezione "Struttura del modelle/sfondo-pagina".... mi sbaglio?
A me interessava invece poter rendere fisse, su smartphone, tutte le immagini di sfondo che ho inserito all'interno della pagina; immagini che su desktop vengono mostrate con la visualizzazione "parallasse".
Author
Ho provato anche con altri overlay ma non cambia nulla, devo inserirli "subito dopo il tag head" perchè siano cliccabili...
... non lo so, il mio codice sopperiva alle lacune segnalate (diverse decine e in diversi anni), anche recentemente, specialmente in ambiente i(!), come hai visto da precedenti Topic, e se adesso con gli ultimi aggiornamenti si riesce ad ottenere lo sfondo fisso da programma, che ben venga e nel caso, visto che tu puoi, lo puoi provare per verificare...
... per le righe intermedie, potresti alternare righe opache con righe trasparenti, ottenendo un bell'effetto con lo sfondo che riappare in modo alternato...
... ho visto il sito, e lo sfondo pare funzionare bene; ...questo effetto lo avevo inventato quando ancora non si parlava di parallasse...
... nota; ...stai usando un immagine in rapporto (27:7), (~10:3), per me poco adatto lo scopo; ...sempre per me sarebbero da preferire immagini in (4:3), oppure in 1:1...
................
... per il menu, non vedo motivi del perchè non possa funzionare;...applica il codice correttamente in modo da poter verificare; ...adesso è comunque errato...
.
ciao
.
Author
Ecco uno shot, il rosso che si vede sotto tutto il resto è l'overlay del menu.
Author
Le immagini 4:3 (o quadrate) da preferire di cui scrivi riguardano lo sfondo pagina o anche quelle dei vari parallasse nelle celle?
Riguardo al menu, risolverei con l'oggetto opzionale aggiuntivo "overlay-menu-website? Vale la pena?
... comunque anche il tuo codice dovrebbe funzionarti senza problemi; ..da quel che ho potuto notare potrebbe funzionare anche inserendolo direttamente le sezione HTML (quella in errore!) in un Oggetto Codice HTML della pagina; ...potresti rapidamente provare...
.
Author
Ho già provato, ho provato anche ad inserire sia il codice html che il css nell'oggetto html, non funziona, non riesco a capire perchè....
Va beh, faccio altri tentativi, anche con altri overlay e male che vado acquisto l'oggetto opzionale.
Appena risolvo, chiudo il post.
Per il momento, grazie di tutto, come sempre :)
... eventualmente fai una rapida prova in una sotto directory "prova" in modo da poter valutare: www.ettorepoggipollini.com/prova/
Author
Ok, Kola, proviamo.... il link è il seguente
https://www.ettorepoggipollini.com/prova/index.html
Ho messo solo la home page, ovviamente.
La prima cella è un oggetto html col codice html inserito nella cella.
I files css e js erano già allegati nella sezione principale, quindi non serviva allegarli nuovamente.
... nello stesso Oggetto HTML, nella scheda HTML, dopo del codice HTML incolla questo codice:
<script>
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
})
</script>
.
Author
Funziona!
Come ultima cosa bisogna far sì che la sticky bar non lo copra ;) ....
Author
Anzi, bisogna portare l'overlay ad un livello superiore perchè viene coperto anche dai contenuti della pagina e quindi non è posssibile cliccare le voci di menu, almeno quando sono coperte da qualche oggetto della pagina.
... torna quello che avevo detto prima: >> 5^ opzione > Dopo l'apertura del tag BODY
... incolla tutto il seguente codice (poi se del caso si potrà controllare lo Z-INDEX) :
------------------------------------
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul> <li><a href="index.html">Start Page</a></li>
<li><a href="index.html#out-now">Out Now</a></li>
<li><a href="index.html#songs">Songs</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contacts">Contacts</a></li>
<li><a href="index.html#donate">Donate</a></li>
<li><a href="index.html#end-page">End Page</a></li> </ul>
</nav>
</div>
<script>
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
})
</script>
-----------------------------------------------
.
Author
Fatto, ecco il solito link:
https://www.ettorepoggipollini.com/prova/index.html
Ho rimosso l'oggetto html ed incollato il tuo codice nella sezione "dopo il tag body"
Resta il problema z-index e poi credo che il problema sia risolto
... OK... >> 3^ opzione > Prima della chiusura del tag HEAD:
<style>
#toggle {z-index:10401 !important}
#overlay {z-index:10400 !important}
</style>
Author
Perfetto Kola!
https://www.ettorepoggipollini.com/prova/index.html
In questo modo sono in regola?
?
Voglio dire, l'overlay inserito in questo modo si integra perfettamente con website?
Procedo col sito regolare, a questo punto!
Poi chiudo il post come risolto, era nato come parallasse ma era più importante questo aspetto, direi!
Fammi sapere, Ettore.
... OK, adesso è a regola, senza errori, e funziona correttamente ...
...
...!... lo sfondo scrolla nello smartphone...!...
...!...tieni anche presente che questo menu non è nato per il monopagina Ancorato (*)...!...
(*) - non servirebbe, ma eventualmente per le Ancore si potrebbe provare con del codice di controllo supplementare...
.
ciao
.
Author
Volentieri, se hai del codice supplementare per le ancore, ben venga!
Anche perchè, come dici tu, all'interno della home page occorre chiudere a mano l'overlay del menu-
Aspetto il codice supplementare ;
Lo sfondo scrolla su smartphone perchè credo di non aver inserito il tuo codice supplementare nel mini sito "PROVA"
L'ho invece inserito nella home page del sito vero e proprio, prova a darci un'occhiata.
Come link di riferimento, usa il sito completo:
https://www.ettorepoggipollini.com
Ti ho comunque lasciato anche il mini sito "PROVA":
https://www.ettorepoggipollini.com/prova/index.html
Poi, come dici tu, per la scelta delle immagini con formato quadrato o 4:3 ci guardo sicuramente successivamente, non ho ancora adattato e deciso le foto finali.
Dimenticavo, alla fine ho utilizzato l'opzione IFRAME sia per il player che per il modulo di contatto, dai un'occhiata se ho fatto bene:
IFRAME CONTACT FORM:
https://www.ettorepoggipollini.com/ettore.html
IFRAME PLAYER:
https://www.ettorepoggipollini.com/minha-janela-lead-acoustic-guitar.html
Author
Kola, mi spieghi per cortesia perchè hai utilizzato 10400 e 10401 come z-index? Che uno sia superiore di un numero all'altro è ovvio, mi domando dove tu abbia estrapolato il 10400.... immagino da website, ma dove?
... ho progettato questo, ...potrebbe funzionare:
<script>
$( document ).ready(function() {
$('.overlay-menu li').click(function() {
$('#toggle').toggleClass('active');
$('.overlay').toggleClass('open');})});
</script>
..............................
... ... ...
https://www.ettorepoggipollini.com
... ... ...
... ... ...
Dimenticavo, alla fine ho utilizzato l'opzione IFRAME sia per il player che per il modulo di contatto, dai un'occhiata se ho fatto bene:
IFRAME CONTACT FORM: ... ... ...
... mi sembrano ambedue OK...
.
... non c'ho perso tempo, ...ma avevo visto che avevi livelli sino a circa 10300, quindi per sicurezza sono stato al di sopra...
.
Author
PERFETTO!
Funziona perfettamente!
Ho notato che su smartphone, durante lo scroll iniziale avviene un piccolo scatto con conseguente lieve zoom dell'immagine di sfondo.... problema da poco, se non si può eliminare non è una cosa grave.
La problematica fastidiosa riguarda la visualizzazione del sito tramite Instagram su smartphone....
Ci sono poi degli spazi vuoti molto lunghi durante lo scroll... insomma, un casino.
Credo sia sicuramente un problema del browser di instagram su smartphone, dato che su pc non ci sono problemi.
Altri siti vemgono mostrati correttamente, mi domando perchè il mio abbia tali problemi.
Nel primo shot il modulo paypal è a sinistra.
Nel secondo shot la freccia nera è a sinistra e non c'è il bianco di fondo.
... OK ... ...lo scatto dipende dallo smartphone, che allo scroll toglie le intestazioni proprie aumentando lo sviluppo della finestra a cui l'immagine si adatta in modalità responsive; ... se ci fai caso lo fa con tutti i siti...
(... in teoria si potrebbe tentare di entrare in modlità channelmode, ma è tutto un altro discorso che non è il caso di affrontare qui...)
... per quanto riguarda instagram per me è un altro mondo e non ho strumenti per verificare...
.
Author
Ciao Kola, ho letto il post in cui, col tuo codice, hai risolto il problema a Francesco Tedeschi, complimenti, sperimento subito e valuterò se lasciare così com'è oppure iniziare in modalità channelmode, sei una miniera di informazioni! :)
Riguardo ad Instagram (che personalmente mi interessa poco come tutti gli altri social) toglierò il link di collegamento al mio sito, nessun problema.
In questo mondo di scimmie da smartphone sarebbe ora che gli utenti si svegliassero un po' di più, diventassero meno pigri ed iniziassero a fare qualche ricerca personale, inserendo manualmente le parole necessarie per raggiungere gli argomenti di loro interesse, senza pretendere di aver sempre tutto pronto con un "click" !!!
Voglio dire, se a me piace un artista o un argomento, vado su google ed inizio a digitare le parole chiave di mio interesse e successivamento faccio una cernita di quello che può fare al caso mio etc etc.
Non capisco questa filosofia del dare tutto a portata di mano altrimenti l'utente non ti viene a cercare....
Se non mi viene a cercare in altri modi o non viene a visitare il mio sito perchè non c'è il link su Instagram significa che probabilmente non c'è tutto questo interesse o necessità, credo.... e comunque siamo messi male se si ragiona così, povero mondo moderno, pieno di strumenti tecnologici in mano a ..... !!!
Ciao Kola, grazie di tutto, dimmi tu con quale tuo post chiudere come corretto questo post, ok?
Grazie ancora, Ettore.
... instagram potrebbe rientrare in questi casi: https://helpcenter.websitex5.com/en/post/232775#comment5
... mi ha divertito il tuo commento
, condivisibile ...
... il ringraziamento, che è quello che per me più conta, lo hai fatto
; ... puoi chiudere col post che preferisci...
...
... e divertiti in Channel Mode...
ciao
-----------------------------------
... P.S. : ... se ti fosse possibile, gradirei una conferma ti quanto avevi detto nel quote appresso, e se puoi postare un tuo esempio così da poter valutare:
... ... ... ... ... ... ... ... ...
Riguardo al tuo codice extra per l'immagine fissa, funziona.
Mi sembra però che equivalga all'opzione di mettere uno sfondo fisso nella pagina, dalla sezione "Struttura del modelle/sfondo-pagina".... mi sbaglio?
... ... ...
.
Author
Certamente!
Di seguito:
https://www.ettorepoggipollini.com/kolasim/index.html
come ho scritto nell'altro post...:
Ho fatto un paio di ricerche ed è un problema noto che il browser di Instagram non visualizzi correttamente certi tipi di siti web , dato che blocca alcuni script in javascript
Author
Grazie Claudio, come ho scritto aanche a Kolasim, nessun problema. Il problema ce l'ha Instagram ;)
si ho letto
io ho/uso instagram, facebook, e molti altri servizi ...
ma tutti da PC , nessuno di questi li ho configurati sullo smartphone...
Author
Come me :) a parte instagram che ho installato esclusivamente per testare il sito direttamente sul mio smartphone oltre che dal codice di ispezione di google su pc.
Mi domando come si faccia ad apprezzare una immagine o una canzone con lo smartphone, mah.... sempre più in piccolo.... gli occhi ringraziano! Se hai cuffie audio buone, tramite uno smartphone buono riesci anche a gustarti una canzone..... ma una immagine? Probabilmente la razza umana regredità, avrà occhi giganteschi, stazza fisica esagerata e un cervello come quello di un T-Rex, molto piccolo ;)
... grazie per il TEST
, ...OTTIMO!; ...importante e buono a sapersi, quasi il mio stesso codice; ...così il mio codice, dopo circa un decennio, può andare tranquillamente in pensione...
... (però, una variante del mio codice potrebbe ancora tornar utile per gli sfondi animati EXTRA, altra storia!)...
ciao
.
Author
"L'altra storia" la apro in un post nuovo?
Mi interessa, volevo infatti inserire qualche animazione di sfondo (css e js) e su codepen ci sono molte idee carine. Ho avuto però problemi perhè una volta inserito il codice ed allegato i relativi files, l' animazione funzionava ma non avevo possibilità di scrollare la pagina del sito....
... meglio in un Topic nuovo...
...
.