Jump to content
Sign in to follow this  
Arixon

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

Recommended Posts

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); 

 

 

Share this post


Link to post

@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.

Share this post


Link to post

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

Share this post


Link to post
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

Share this post


Link to post

@TrzyRazyZero on zrozumiał, że transition może wykorzystać tylko z :hover... Więc rozszerzyłem Twoją wskazówkę.

  • Like 1

Share this post


Link to post

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ąć.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...