Ciao a tutti
vorrei sapere come posso fare a caricare il contenuto di una pagina al di sotto dell'above de fold e farlo scrollando con effetto fade in.
Magari l'effetto fade in lo farei con animate.css ma vorrei cmq caricare il resto quando la pagina scrolla.
Sapete come è possibile farlo?
Grazie
Con JS e' abbastanza semplice. Devi farlo con pure CSS?
The only way to stay sane is to go a little crazy. - Susanna Kaysen
credevo fosse una cosa di css, non pensavo fosse javascript.
Anche se siamo fuori sezione sapresti darmi qualche info ?
Qualcosa tipo questo?
https://codepen.io/annalarson/pen/GesqK
The only way to stay sane is to go a little crazy. - Susanna Kaysen
si piu' o meno, pero' vedo che la pagina è già caricata, mostra solo i contenuti con il fade, infatti la scroll bar esiste già sulla destra.
Io vorrei scrollare e caricare la pagina
Ciao, come ti hanno già indicato si tratta più che altro di JavaScript. Il semplice effetto fade-in può essere fatto in CSS ma per la gestione dell'evento scroll e per il caricamento on the fly dei contenuti bisogna utilizzare rispettivamente JavaScript e AJAX.
Un effetto simile lo si trova in genere nei siti di tipo one-page. Prova magari a fare qualche ricerca in questo senso.
Nel mentre sposto la discussione sul forum JavaScript.
Buon proseguimento.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ho creato un altro CodePen. La pagina ha del contenuto iniziale e reagisce allo scroll senza dover impostare l'height iniziale del container (che fa uscire la scrollbar in anticipo). Il contenuto aggiuntivo e' caricato con AJAX quando si scrolla, e viene visualizzato con fade in. Ogni porzione di HTML caricata con AJAX e' wrappata in un div con una classe temporanea usata per identificare il nuovo HTML aggiunto cosi' da fare fade in soltanto per quello e non per il contenuto gia' sulla pagina prima dello scroll.
Il codice evita di effettuare piu' HTTP requests contemporaneamente quando si scrolla velocemente.
Gioca con questo tipo di soluzione
https://codepen.io/SkyLinx/pen/wEowYP
The only way to stay sane is to go a little crazy. - Susanna Kaysen
wow, era proprio quello che cercavoOriginariamente inviata da SkyLinx
Ho creato un altro CodePen. La pagina ha del contenuto iniziale e reagisce allo scroll senza dover impostare l'height iniziale del container (che fa uscire la scrollbar in anticipo). Il contenuto aggiuntivo e' caricato con AJAX quando si scrolla, e viene visualizzato con fade in. Ogni porzione di HTML caricata con AJAX e' wrappata in un div con una classe temporanea usata per identificare il nuovo HTML aggiunto cosi' da fare fade in soltanto per quello e non per il contenuto gia' sulla pagina prima dello scroll.
Il codice evita di effettuare piu' HTTP requests contemporaneamente quando si scrolla velocemente.
Gioca con questo tipo di soluzione
https://codepen.io/SkyLinx/pen/wEowYPgrande!!
wow, era proprio quello che cercavo
The only way to stay sane is to go a little crazy. - Susanna Kaysen
Permessi di invio
Rispondi quotando