Zmieniający się obrazek w body

Dla specjalistów Webmastering
#1

Witam serdecznie,

mam taką stronkę: http://stepby.no-ip.org/MONIKA/JASTARNIA/

Chciałabym zrobić animowane obrazki w tle (to tło obrazkowe żeby się zmieniało jakoś ładnie co parę sekund) :slight_smile:

Dodałam tak to tło:

background: url(…/img/tlo_plaza_0.jpg) 50% 15% no-repeat;

background-color: black;

Macie może jakiś pomysł jak mogę zrobić takie animowane zmiany tła?:slight_smile:

Bardzo dziękuję za pomoc, Monika

#2

Javascript + jQuery dla ułatwienia. Przykład: http://jsfiddle.net/WuAQk/2/

#3

super, dziękuję bardzo!! o to mi chodziło :slight_smile:

mam tylko mały problem z tą animacją… przy przejściach (gównie na IE) nie ma efektu ładnego przejścia, a jest “przeskok”…

chciałabym uzyskać taki efekt jak tutaj mają: http://www.hotelkrasicki.pl/ (to animowane tło)… macie może jakiś pomysł na to?:slight_smile:

#4

To jest animacja zrobiona we flash’u, długo się ładuje / jest ciężka :stuck_out_tongue: Radzę olać :))

#5

Fakt, te animacje są zrobione w CSS3, czyli działają we wszystkich najnowszych przeglądarkach, czyli nie działają na IE<10. Na tej stronie tło jest zrobione za pomocą flasha (co jest złym pomysłem). Zmieniłem to na animacje w JavaSciprt: http://jsfiddle.net/WuAQk/4/ Zobacz czy działa w IE, ja korzystam z Linuxa i nie mogę tego sprawdzić. Niestety to rozwiązanie ma jedną wadę: ustawienie divowi 100% wysokości w CSSie rozszerza go nie na wysokość strony, a na wysokość okna. Co to znaczy? Jeśli na stronie jest pasek przewijania - tło nie jest na całej wysokości. Rozwiązania są dwa:

  1. Nadanie obu divom #bg1, #bg2 właściwości

    position: relative;

    top:0;

    left:0;

    right:0;

    bottom:0;

Sprawi to, że tło jest nieruchowe (przewija się treść strony, a tło jest w miejscu) 2. Jak Javascript, to javascript po całości

function Rozszerz() {

        $('#bg1').height($(window).height());

        $('#bg1').width($(window).width());

        $('#bg2').height($(window).height());

        $('#bg2').width($(window).width());

    }


    Rozszerz();


    $(window).resize(function() {

       Rozszerz();

    });

Ten kod rozszerza bezwzględnie divy, gdy zmienia się rozmiar okna.

#6

a nie lepiej skorzystać np. z vegas ?

tutaj i tutaj jeszcze kilka innych, a jest tego więcej.

Do wyboru, do koloru.

#7

prawie dobrze :slight_smile:

http://stepby.no-ip.org/MONIKA/JASTARNIA/ - nie wiem czemu, ale niektóre zdjęcia są jakby 2 naraz wyświetlane (po przeładowaniu). Wiesz może dlaczego??:slight_smile:

#8

W sumie mój sposób to uproszczona wersja wszystkich różnych pluginów jquery, które podał @adpawl, więc w sumie faktycznie może nie ma sensu korzystania z moich wersji. W każdym razie, ten błąd pojawia się, bo do #bg1 dałaś styl background: 50% 15% no-repeat center; , a mój skrypt animując tło usuwał to 50% 15% no-repeat center. Rozwiązaniem jest zmienienie tej linijki

elemCur.css('background','url("'+tla[i]+'")');

na

elemCur.css('background-image','url("'+tla[i]+'")');
#9

jak już używam Twojego, to niech już zostanie :slight_smile:

właśnie próbuję Twój kod, ale dalej robi to samo - obrazki po odświeżeniu nie wyświetlają się poprawnie :frowning:

jeszcze raz dziękuję za pomoc :slight_smile:

#10

Oglądam to i nie widzę co jest źle…

#11

u mnie te tła są w którymś momencie 2 naraz… jakby pezesunięte w lewo i 2 jednocześnie (testuje w tej chwili na chrome)

#12

Dobra, już wiem.

W stylach css, selektor #bg1, body zmień na samo #bg1. Body tutaj jednak nie jest potrzebne.

Po co przeładowujesz stronę przy zmienianiu rozmiaru okna? Toż to zupełnie bez sensu!

#13

dalej nic… :frowning:

#14

Chodziło mi, aby całkowicie usunąć tło z body. Gdy przez pewien moment się zmienia przezroczystość tych divów - przez chwilkę widać tło z body = widać 3 tła. Usuń całkiem tło z body i będzie ok.

#15

usunęłam :slight_smile: Ale nie pomogło… coś źle zrobiłam?

#16

Teraz dla mnie wygląda ok. Podczas przejścia widać przez pewien czas obydwa - o to chyba chodzi prawda? :> Chyba, że masz na myśli, że te dwa obrazki różnią się tylko tekstem na jednym z nich, a wyświetlają się inaczej - w CSSach masz dla #bg1 styl tła 50% 15% center.

#17

tzn. chodzi mi o to że jeden ze slajdów jakby był przesunięty w lewo - i widać w tym momencie po prawej stronie 2 obrazek…

#18

W CSSach masz dla #bg1 styl tła 50% 15% center

To przesuwa jedno tło

#19

http://jastarnia.nazwa.pl/index.html - kurcze, już prawie mam dobrze wszystko :slight_smile: Mam tylko problem z tym, że te animowane zdjęcia na dużym monitorze się powielają po parę razy na szerokość… da się to jakoś wycentrować i ograniczyć do wyświetlenia jednego zdjęcia na całej stronie?:slight_smile:

dziękuję bardzo za pomoc :slight_smile:

#20

To do #bg1 i #bg2 daj po prostu styl

background:no-repeat center;

I KONIECZNIE wywal z pliku banner.js

location.reload();

W $(window).resize(function() { (…) });

Po co strona ma się przeładowywać w momencie zmiany rozmiaru okna? OKROPNIE drażniące