Effetto parallax 
Autore: Vincenzo Errico
Visite 938,
Followers 2,
Condiviso 0
Ciao!
Ho inserito del codice esterno per implementare (in home page) una foto con scroll che si adatta alla finestra del browser: https://www.vincenzoerrico.it/
La domanda è questa: è possibile ricreare un effetto parallax?
Cioè, è possibile far sì che la foto di apertura rimanga fissa e allo scroll della pagina venga coperta dai contenuti?
Come uno stile riga con immagine, per intendersi meglio.
Grazie mille.
Postato il
prova a metterla con z-index -1 e position fixed
a parte che ora che la ho vista, la fai con il programma già come vuoi tu senza codici...
mettila come sfondo riga, e la metti con effetto parallax fisso...
Si, ha ragione Mirko. Effetto "Parallax fisso" e non usi nessun codice.
Autore
In stile riga non ti da la possibilità di inserire l'immagine e farla adattare anche in altezza al browser. Su smartphone diventa tutta un'altra cosa.
Non che questo risolva il problema, ma a me sembra che hai inserito il codice in head, mentre, almeno la parte HTML, andrebbe inserito nel body.
... se ti riferisci a quelli con la i(!), sarà facile che sia come dici...
... comunque nel tuo LINK all'immagine non funziona il resize...
... dovrebbe funzionarti almeno >> così, ...come già ti avevo fatto vedere tempo addietro, forse ai tempi della v.12...
... correggi gli errori appena segnalati...
.
Autore
Grazie della segnalazione, Esse Di.
Ho spostato la parte di seguito in "Prima dell'apertura del tag BODY" è corretto?
Mentre la parte tra <style> e </style> l'ho lasciata in "Prima della chiusura del tag HEAD" è corretto anche questo?
Grazie.
<section id="section01" class="scroll">
<h1>VINCENZO</h1><h2>ERRICO</h2>
<h3>PHOTOGRAPHY</h3>
<a href="#" onclick="return x5engine.utils.location('#imHeader', null, false)"><span></span>Scroll</a>
</section>
... adesso il resize cover funziona, anche su Android; ... se puoi controlla sui dispositivi i(!), che spesso si è sentito dire per lo sfondo che non si adatti...
... anche la pagina, (ed il resto del sito), adesso si presenta bene, rispetto a quel tentativo di mono pagina che avevi precedentemente provato...
.
... vedendo degli esempi di Giuseppe, forse potresti tentare l'effetto parallasse che chiedevi in oggetto...
.
Sì. ora il codice esterno è inserito in modo corretto. Purtroppo non so aiutarti per rendere l'id section01 fisso mentre il resto della pagina scrolla sovrapponendosi ad esso.
Autore
Grazie comunque, Esse Di.