Ciao a tutti, volevo sapere, se è possibile, come si fa l'effetto della foto che scorre, come ho visto su questa
pagina web : http://www.senzafilisenzaconfini.org/. Grazie
pagina web : http://www.senzafilisenzaconfini.org/. Grazie
[HTML] Foto in movimento
- Creatore Discussione Roberto999
- Data di inizio
Lo sfondo fi quel sito è stato realizzato con i CSS3
Però si può ottenere anche con un semplice script JS
Codice:
body, input, select, textarea {
font-size: 13pt;
}
/* BG */
@-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -o-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } }
@-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -o-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } }
@-o-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -o-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } }
@-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -o-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } }
@keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -o-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } }
#bg {
background-size: 1500px auto;
width: 4500px;
}Ciao Max 1, volevo chiederti, questo codice lo devo inserire nel tag <body> della pagina dove voglio
fare l'effetto e alla foto devo dargli le dimensioni 1500 in altezza e 4500 in larghezza.
fare l'effetto e alla foto devo dargli le dimensioni 1500 in altezza e 4500 in larghezza.
Quel codice io l'ho ricavato dal foglio di stile del sito da te segnalato ed è lì che deve stare però nel tuo caso non credo funzioni perchè si riferisce ad un loro tema io te l'ho riportato solo come esempio di partenza e per farti capire come ganno realizzato l'effetto ma io sinceramente userei uno script in JS
ESEMPIO
ESEMPIO
Ciao, ho visto il tuo esempio, ma non so se hai notato, ad un certo punto lo sfondo non è ben
allineato, deve essere cosi o si può correggere.
allineato, deve essere cosi o si può correggere.
No! Non è vero che non è allineato è l'immagine che a sinistra ha gli scogli più sottili e a destra più grossi quindi, quando nell'animazione finisce l'immagine e ricomincia il ciclo si vede la differenza, ma quella è un'immagine di fortuna per farti un esempio
Come detto dipende dall'immagine scelta! Ovvio che ci vuole un'immagine adatta per quell'effetto, anche l'immagine del sito da te menzionato è un'immagine adattata al caso, devi capire che non c'è unimmagine larga chilometri, ma è un'immagine che gira ripetendosi.
Mi sono spiegato?
Discussioni simili
