Forum PHP.pl

Witam,
Mam kod który zmienia tło strony co 3 sekundy, jednak chcę uzyskać efekt delikatnego przejścia z jednego tła w drugie. Obecnie jest to gwałtowny przeskok z jednego zdjęcia w drugie.

[PHP] pobierz, plaintext 
<script type="text/javascript">
 
window.addEventListener('load', function () {
    var tla = ['url(foto1.jpg)', 'url(foto2.jpg)'];
    var czas = 3; // 3 sekundy
 
    var i = 0;
    setInterval(function () {
        i++;
        i%=tla.length;
 
        document.body.style.backgroundImage = tla[i];
    }, czas * 10000);
}, false);
</script>
 
[PHP] pobierz, plaintext 

Musisz wstawić dwa divy z tłem lub dwa obrazki, jeden na drugim (position: absolute). Obrazek z przodu jest niewidoczny (opacity: 0), a następnie płynnie dodajesz mu opacity, aż osiągnie opacity: 1.

Wydaje mi się, że najprościej będzie stworzyć div, który będzie pokrywał cały dokument. Chodzi mi o coś takiego:


Zamiast podmieniać tło dla body będziesz mógł ustawić dla #bg opacity na 0, ustawić jego tło, stopniowo zwiększać opacity, a na koniec ustawić to samo tło dla body i zacząć cały proces od nowa. Mam nadzieję, że w miarę jasno to opisałem.

A w ogóle to najlepiej skorzystać z gotowych skryptów, które to robią A jest ich mnóstwo.