Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][JavaScript][PHP] Zmiana background-image co kilka sekund
-Alex00101-
post
Post #1





Goście
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 
  1. <script type="text/javascript">
  2.  
  3. window.addEventListener('load', function () {
  4.     var tla = ['url(foto1.jpg)', 'url(foto2.jpg)'];
  5.     var czas = 3; // 3 sekundy
  6.  
  7.     var i = 0;
  8.     setInterval(function () {
  9.         i++;
  10.         i%=tla.length;
  11.  
  12.         document.body.style.backgroundImage = tla[i];
  13.     }, czas * 10000);
  14. }, false);
  15. </script>
  16.  
[PHP] pobierz, plaintext


Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
SmokAnalog
post
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
kipero
post
Post #3





Grupa: Zarejestrowani
Postów: 233
Pomógł: 50
Dołączył: 28.10.2006
Skąd: Radom

Ostrzeżenie: (0%)
-----

Wydaje mi się, że najprościej będzie stworzyć div, który będzie pokrywał cały dokument. Chodzi mi o coś takiego:
Kod
<body>
<div id="bg">
... właściwa treść ...
</div>
</body>


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.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #4





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

A w ogóle to najlepiej skorzystać z gotowych skryptów, które to robią (IMG:style_emoticons/default/smile.gif) A jest ich mnóstwo.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 19:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn