[css] Problema con fogli di stile css

[Harrison76]

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

[rewrew999]

Il flash è quasi sicuramente dovuto alla mancanza del preload delle immagini. Ovvero vengono scaricate dal browser solo nell'istante in cui vengono visualizzate per la prima volta e questo causa un leggero ritardo.

Per il preload puoi dare un'occhiata a questo articolo https://css-tricks.com/snippets/css/css-only-image-preloading/
In linea di massima il trucco sta nel caricare l'immagine ma mostrarla fuori dallo schermo cosicché l'utente non se ne accorga.

Per quanto riguarda il supporto browser, il problema è che la proprietà "background-image" (ad esclusione delle sfumature) è da solo recentemente compatibile con le animazioni CSS3. Quindi è probabili che non tutti i browser già la supportino. (Cerca per background-image cross-fade interpolation se vuoi più info)

Per risolvere il terzo punto mi sa che devi avere la stessa immagine allo 0% e al 100%.

In ogni caso, secondo me, le css animation (almeno usate in questo modo) non sono il massimo per creare uno slider. Ci sono soluzioni js+css che ti permettono più personalizzazioni e risolvono problemi con il preload delle immagini o la compatibilità cross-browser.

[Harrison76]

ciao rewrew999,
ho seguito i tuoi consigli ed ho provato a cambiare tecnologia: ho messo il menu css e lo slide in js.
Sono riuscito ad aggiustare quasi tutto, tranne l'altezza dello slide: io vorrei che quando si stringe lo schermo si stringesse anche l'immagine, riducendo l'altezza.. in pratica come se lo sfondo fosse ad effetto cover.
Ho usato questo script https://github.com/terwanerik/FadeShow
Hai idea ci come posso modificare il sito per dare questo effetto?
Grazie

[rewrew999]

Lo slider che hai scelto ha un'opzione "correctRatio" che se settata forse fa quello che vuoi:
"If true, the aspect-fill is kept intact while resizing the window. If false, the aspect-fill only works every time a new image appears."


Altrimenti puoi provare con le CSS Media Queries, ti permettono di definire regole e stili diversi a seconda della dimensione dello schermo (e anche di tanti altri parametri). https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Ad esempio:

/* Stili per schermi fino a 639px */
.fadeShow-container {
max-height: 200px;
}

/* 640px in su */
@media (min-width: 640px) {
.fadeShow-container {
max-height: 300px;
}
}

/* 1024px in su */
@media (min-width: 1024px) {
.fadeShow-container {
max-height: 400px;
}
}