Forum by laureateci.it

Nome Utente:	Password:
Salva Password
Password Dimenticata?

Tutti i Forum

ITPS - Secondo Anno

Programmazione per il Web + Lab.

Domanda fogli di stile css

Nota: Devi essere registrato per poter inserire un messaggio.
Per registrarti, clicca qui. La Registrazione è semplice e gratuita!

Larghezza finestra:

Nome Utente:

Password:

Modo:

Formato:

Icona Messaggio:

Messaggio:

* Il codice HTML è OFF
* Il Codice Forum è ON

Smilies

[quote][i]Messaggio inserito da ghisirds[/i]
[br]Ciao a tutti,
in un restyling di un sito web che sto seguendo, visibile qui http://goo.gl/cbIFNP , sto provando a creare uno slide di immagini con immagini di sfondo caricate direttamente dal css.

Il codice css dello slide è questo:

#headline {
 padding: 0.8em;
 color: white;
 font-family: 'Exo 2', sans-serif;
 background-color: #FFF;
 background-size: cover;
 background-position: center;
 background-image: url(../img/slide1.jpg);
 animation: slides_animation 20s infinite;
}

@keyframes slides_animation {
  0%  {
 background-image: url(../img/slide1.jpg);
  }
  25%  {
 background-image: url(../img/slide2.jpg);
  }
  50%  {
 background-image: url(../img/slide3.jpg);
  }
  75%  { 
 background-image: url(../img/slide4.jpg);
  }
  100% {  
 background-image: url(../img/slide5.jpg);
  }
}

Vi sono alcuni problemi però che non riesco a risolvere e che vorrei porgere alla vostra attenzione.

Intanto va solo su chrome anche se inserisco i vendor (mentre gli effetti più in basso, nelle immagini dei servizi, vanno con tutti i browser anche senza vendor).

Se lo guardate quindi con chrome, vedete che fra un'immagine l'altra vi è come un flash, almeno al primo giro, dopodichè si stabilizza.
Terzo punto, quando finisce l'ultima slide, e riparte dalla prima, non da effetto di dissolvenza fra le due.
Qualcuno sa come aggiustare questi punti?
Grazie

[/quote]

Allega file

Clicca qui per inserire la tua firma nel messaggio.
Clicca qui per sottoscrivere questa Discussione.

V I S U A L I Z Z A D I S C U S S I O N E

ghisirds

Inserito il - 02/04/2016 : 10:36:12

Ciao a tutti,
in un restyling di un sito web che sto seguendo, visibile qui http://goo.gl/cbIFNP , sto provando a creare uno slide di immagini con immagini di sfondo caricate direttamente dal css.

Il codice css dello slide è questo:

#headline {
padding: 0.8em;
color: white;
font-family: 'Exo 2', sans-serif;
background-color: #FFF;
background-size: cover;
background-position: center;
background-image: url(../img/slide1.jpg);
animation: slides_animation 20s infinite;
}

@keyframes slides_animation {
0% {
background-image: url(../img/slide1.jpg);
}
25% {
background-image: url(../img/slide2.jpg);
}
50% {
background-image: url(../img/slide3.jpg);
}
75% {
background-image: url(../img/slide4.jpg);
}
100% {
background-image: url(../img/slide5.jpg);
}
}

Vi sono alcuni problemi però che non riesco a risolvere e che vorrei porgere alla vostra attenzione.

Intanto va solo su chrome anche se inserisco i vendor (mentre gli effetti più in basso, nelle immagini dei servizi, vanno con tutti i browser anche senza vendor).

Se lo guardate quindi con chrome, vedete che fra un'immagine l'altra vi è come un flash, almeno al primo giro, dopodichè si stabilizza.
Terzo punto, quando finisce l'ultima slide, e riparte dalla prima, non da effetto di dissolvenza fra le due.
Qualcuno sa come aggiustare questi punti?
Grazie

Forum by laureateci.it

Il DB ha risposto in 0,03 secondi.