Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Arixon

Płynniejsza, dynamiczna zmiana tła kontenera JS / jQ

Promowane odpowiedzi

Tak jak w temacie, mam kod, który działa prawidłowo. Lecz przejścia nie są dynamiczne, próbowałem jquery, lecz nic mi nie wychodziło. Chciałbym dodać jakiś spowolniony efekt przejścia między zdjęciami, lecz nie wiem jak. Oto kod:

 

window.addEventListener('load', function () {
var foto = document.getElementById("top");
var bg = ['url(img/h1.jpg)', 'url(img/h2.jpg)', 'url(img/h3s.jpg)'];
var czas = 5; // 5 sekund

var i = 0;
setInterval(function () {
i++;
i%=bg.length;

foto.style.backgroundImage = bg[i];

}, czas * 1000);
}, false); 

 

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

@TrzyRazyZero nie o to mi chodzi. Chcę zrobić efekt typu fade na przykład. Lecz nie wiem jak to dobrze ująć, ponieważ ten efekt ma być zastosowany do background'u. Nie chce robić nic z hoverem.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Dnia 16.03.2017 o 15:19, Arixon napisał:

@TrzyRazyZero nie o to mi chodzi. Chcę zrobić efekt typu fade na przykład. Lecz nie wiem jak to dobrze ująć, ponieważ ten efekt ma być zastosowany do background'u. Nie chce robić nic z hoverem.

 

19 godzin temu, Salva napisał:

Możesz wykorzystać opacity + transition + klasy. Innej możliwości "pojawiania i znikania" nie widzę.

?? dalem mozliwosc w pierwszym poscie

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Okey, wykorzystam to. Po prostu chciałem zrobić to js'em. Ale w sumie, może nie ma co się głowić i lepiej zrobić prostszym sposobem. 

Dziękuję za pomoc. Można zamknąć.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


×