• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Czasowa zmiana tła diva z animacją

VPS Starter Arubacloud
0 głosów
1,006 wizyt
pytanie zadane 21 kwietnia 2016 w JavaScript przez Bakr Mądrala (6,850 p.)
Witam, W jaki sposób sprawić, aby tło diva zmieniało się po upływie danego czasu wraz z animacją przejścia?
komentarz 21 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

po upływie danego czasu

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Co do animacji, to podaj jakieś szczegóły. 

komentarz 21 kwietnia 2016 przez Bakr Mądrala (6,850 p.)
Chodzi o prostą animację (np. jedna z tych: http://css3.bradshawenterprises.com/cfimg/ ). Jak ją zintegrować ze zmianą zdjęć?
komentarz 21 kwietnia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, nie mam pod ręką obrazków o identycznych wymiarach, więc napiszę trochę w ciemno na podstawie HTMLa i CSSa z pierwszego przykładu ze stronki, którą podałeś:

CSS:

#cf img.top.over {
  opacity:0;
}

+ JavaScript:

setTimeout(function()
{
     document.querySelector('.top').classList.add('over');
}, 3000); // wykonaj po 3 sekundach

Daj znać, czy działa, albo co nie działa.

2 odpowiedzi

0 głosów
odpowiedź 21 kwietnia 2016 przez Comandeer Guru (604,060 p.)

requestAnimationFrame albo transition, tudzież CSS Animations.

0 głosów
odpowiedź 30 kwietnia 2016 przez Bakr Mądrala (6,850 p.)
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['images/Krotoszyn087.jpg','images/Krotoszyn088.jpg','images/Krotoszyn100.jpg'];
  var image = $('.bgns-1');
                //Initial Background image setup
  image.css('background-image', 'url(images/Krotoszyn095.jpg)');
                //Change image at regular intervals
  setInterval(function(){   
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(10);
   });
   if(i == images.length)
    i = 0;
  }, 5000);            
 });
</script>

Jak zmienić w tym skrypcie animacje zmiany?

Podobne pytania

0 głosów
1 odpowiedź 188 wizyt
pytanie zadane 22 sierpnia 2015 w JavaScript przez makoso Mądrala (7,380 p.)
+1 głos
3 odpowiedzi 489 wizyt
pytanie zadane 8 lipca 2020 w JavaScript przez RysiekB Nowicjusz (130 p.)
0 głosów
0 odpowiedzi 2,527 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)

92,782 zapytań

141,712 odpowiedzi

320,600 komentarzy

62,114 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...