Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Sfondo body con transizione (effetto parallax)

    Salve e buona sera a tutti

    Volevo porvi una domande...
    Recentemente visitando dei siti web ho notato una specie di transizione dello sfondo nel body molte bella(a mio parere) e mi interesserebbe metterla nel nuovo sito che pubblicherò tra un po'.

    La transizione consiste nel:
    C'é uno sfondo nel body con:
    width: 100%;
    height: auto;

    a me interesserebbe aggiungere un margine di 50 o più px(pixel) sopra e sotto in modo che se l'immagine è alta 1000px lo sfondo complessivo sia alto 1100px (1000+50+50).
    Mettiamo che lo schermo sia alto in totale 900px io vorrei che lo sfondo scrollasse insieme al contenuto del body.

    Spero di essermi spiegato bene anche se dubito

    Buona serata!
    Grazie in anticipo!
    Ultima modifica di ciro78; 29-03-2017 a 12:54

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao e benvenuto, personalmente non ho capito troppo di quel che hai indicato. E' possibile tu ti riferisca ad un qualche effetto "parallasse", che da qualche anno a questa parte è usato e strausato, generalmente su siti di tipo "one-page" (a pagina singola). Nel caso, prova intanto a dare uno sguardo a questo articolo Pagina singola con effetto parallax.

    Se non è ciò che stai chiedendo, prova magari a postare un link di uno dei siti dove hai notato l'effetto di cui parli.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Salve a tutti!

    KillerWorm grazie della tua risposta, mi è stata utile al 90%.
    Si, effettivamente la mia descrizione non era delle migliori, ma sei comunque riuscito a comprendere ciò che mi serviva, complimenti!

    Per il resto io mi chiedevo se esistesse un modo nel parallax di fare in modo che, scorrendo la pagina l'immagine di sfondo scorra in senso opposto. L'esempio pratico per capire meglio è qui:
    https://www.dwavesys.com/d-wave-two-system

    In questa pagina è presente l'effetto che mi servirebbe.
    Grazie comunque della risposta precedente e spero tu possa aiutarmi in questo nuovo problema!

    Buona serata!

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, chiariamo subito che l'effetto parallax è creato più che altro via JavaScript; il CSS in questo caso è abbastanza marginale.
    Detto questo, sposto la discussione sul relativo forum JavaScript. Eventualmente potresti ottenere ulteriori risposte è migliori consigli.

    Per ottenere tale effetto ci si affida, in genere, a qualche libreria o plugin JavaScript.
    Sull'articolo che ti ho postato viene utilizzato Stellar.js. Personalmente non ho mai avuto occasione di utilizzare robe del genere ma, da quel poco che ho visto, quella proposta sull'articolo mi pare una risorsa valida, per ciò che serve a te.

    Per il resto io mi chiedevo se esistesse un modo nel parallax di fare in modo che, scorrendo la pagina l'immagine di sfondo scorra in senso opposto.
    Sull'articolo, e sulla documentazione stessa di quel plugin, non ho trovato informazioni a riguardo, ma (se hai letto l'articolo) puoi vedere che, per applicare l'effetto, viene usato un attributo data- il cui valore definisce, in sostanza, la velocità di scorrimento. Prova ad impostare un valore negativo; dovresti ottenere ciò che chiedi, chiaramente dopo aver assemblato opportunamente tutto il necessario per avere l'effetto parallax.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Salve a tutti!

    Grazie della risposta.
    Sì, ho letto tutto l'articolo e sono arrivato alle conclusione di evitare di mettere lo stellar.js perché mi complicherebbe solo le cose.
    Nel frattempo però sono arrivato a riscontrare un altro problema sul parallax ovvero quando lo testo su Chrome da pc funziona bene(il normale parallax) senza nessun tipo di problema. Successivamente ho provato a testare il responsive del sito per i dispositivi mobili su Chrome tramite il debug(click destro sulla pagina -> ispeziona ecc...) e ha funzionato bene lo stesso, poi ho provato a caricare la stessa pagina sul mio cellulare e non mi legge tutt'ora le stringhe riguardanti il parallax.
    Mi utilizza il <section> per il parallax come normale div di altezza 100% e con uno sfondo e basta.
    Il problema è causato dalla mia pagina per un errore nel codice o un problema di android(Chrome) che non legge certe "stringhe".

    Se serve posso postare il codice.

    Buona giornata!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.