Ciao, spero sia il posto giusto per questo post. Sono arrivato a questo sito tramite un amico:
http://www.senzafilisenzaconfini.org/ e mi è piaciuto l'effetto dello sfondo che scorre, volevo chiedere
se qualcuno gentilmente può spiegarmi come posso realizzare un effetto di questo tipo e come deve essere la foto per lo sfondo se una foto normale o una foto panoramica.
Grazie
Ciao e benvenuto, sì il posto è giusto perché quell'effetto è appunto realizzato con CSS. Tuttavia la tua richiesta è di carattere generico e, non conoscendo il tuo livello di esperienza, mi limito personalmente a darti qualche indicazione di base su come è stato impostato quell'effetto, quindi ti invito a fare eventualmente qualche ricerca per approfondire.
In linea di massima si parte da un immagine sufficientemente larga impostata come background e ripetuta in orizzontale (background-repeat: repeat-x;).
Sul sito che hai indicato, questo background è impostato in un semplice div a cui è applicata un'animazione tramite animation che è definita con un tempo di 60s e ripetizione infinita (animation: bg 60s linear infinite;).
Tale animazione è impostata per agire sulla proprietà transform. In particolare i due punti, inizio e fine, sono impostati rispettivamente con transform: translate3d(0,0,0); e transform: translate3d(-1500px,0,0); per cui si avrà un'animazione di tale proprietà, ripetuta all'infinito, tra questi due valori.
Il valore di 1500px corrisponde grossomodo alla larghezza dell'immagine.
Sul quel sito l'immagine è questa. Puoi notare che è speculare, presumibilmente creata ad hoc con qualche programma di grafica.come deve essere la foto per lo sfondo se una foto normale o una foto panoramica.
E' chiaro che un'immagine panoramica potrebbe creare un effetto più realistico, ma sta a te valutare in base alle tue esigenze.
Ad ogni modo il css si limiterà a "spostare" l'immagine. Ogni elaborazione grafica, sull'immagine stessa, dovrebbe essere eseguita preventivamente con appositi programmi di grafica.
Altre informazioni ed eventuali tutorial puoi trovarli sul web facendo qualche ricerca con termini tipo: "css background image infinite animation".
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ciao, grazie per avermi risposto, non sono molto esperto in materia e volevo chiederti se possibile scrivermi il codice per avere questo effetto. Quello che volevo fare è mettere l'immagine di un tramonto che scorre e volevo chiederti se è meglio usare una foto panoramica
o speculare come dici tu.
PS: speculare intendi che a unto una foto più una seconda uguale rovesciata.
Grazie ancora.
Per l'immagine va bene una qualsiasi se a 360° forse è meglio, l'importante è che l'inizio dell'immagine sia una continuita della fine altrimenti si vede lo stacco
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
E se per caso "animation" non è supportato? l'immagine rimane fissa "al punto 0 del translate" o ti giochi il layout?
Figurati.Originariamente inviata da Giorci88
[Mod]
Ad ogni modo il forum in genere non funziona in questo modo. Credo che le informazioni, che ti ho già indicato, siano sufficienti per raggiungere il tuo obbiettivo. Se hai tempo/volontà di imparare puoi iniziare a studiare qualcosa a partire dai riferimenti che ti ho indicato. Se stai chiedendo che qualcuno faccia il lavoro per te, allora la sezione giusta è Offro lavoro/collaborazione.
[/Mod]
Almeno hai provato a fare qualche ricerca come ti ho indicato?Altre informazioni ed eventuali tutorial puoi trovarli sul web facendo qualche ricerca con termini tipo: "css background image infinite animation".
Vedi qui come si fa: http://lmgtfy.com/?q=css+background+...nite+animation
Devi valutare tu secondo le tue preferenze/esigenze oltre alla disponibilità/capacità per ottenere una soluzione piuttosto che l'altra. Il fatto che in quel caso abbiano usato un'immagine speculare, presumo sia stato per rendere estremamente semplice l'operazione che serve ad ottenere una certa continuità. Vedi anche la risposta di carlomarangoni.
Esattamente, ma l'immagine dovrà essere preparata preventivamente con qualche software/tool grafico.
Non c'è di che.
In genere le regole non riconosciute dall'interprete css del browser, cioè sia quando non sono supportate sia per qualsiasi proprietà o valore scritto in modo errato, semplicemente non vengono considerate.
In questo caso credo non influisca sul layout, ma bisognerebbe verificare di caso in caso.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie per la rispostaKillerWorm, io però mi riferivo alla foto in questione, mi spiego meglio: se il browser non riconosce il css3 la foto rimane (almeno) fissa senza scorrere oppure non la visualizzo proprio?
@Giorci88 Devi anche tener conto che su altri forum dove hai postato la stessa domanda ti hanno fornito la pappa pronta solo da copiare. Se non metti in pratica i suggerimenti non ne verrai mai a capo
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
L'immagine sarà definita come background, per cui presumo venga regolarmente interpretata da qualsiasi browser. Ciò che verrà saltato, sui browser che non ne hanno il supporto, sarà la proprietà translate (o animation o quel che è), e relative regole annesse. Suppongo quindi che l'immagine resti fissa nella posizione definita tra le regole di base ma, ripeto, sarebbe da verificare di caso in caso. Poi se il translate non supportato dai vecchi browser è un problema, allora si potrebbe pensare all'uso di diverse altre soluzioni.
Senza offesa ma personalmente ritengo sterile proseguire nell'argomento in questo senso; il discorso resta ipotetico e generale fintanto che non si ha un effettivo codice da provare/verificare e su cui poter discutere.
Dice il saggio:
Inutile fasciarsi la testa prima d'averla sfasciata; ma è anche impossibile ..."sfasciarla" se prima non l'hai fasciata.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando