CSS3 - przesuwane tło w IE 3335 10

O temacie

Autor Caesum

Zaczęty 3.01.2015 roku

Wyświetleń 3335

Odpowiedzi 10

Caesum

Caesum

Użytkownicy
posty1731
Propsy2207
NagrodyV
Profesjabrak
  • Użytkownicy
Mam taki kod:

/* Duże logo po prawej */
#headlogo2 {
background: url(http://i.imgur.com/nr9dJcU.jpg) repeat center top;
background-size: top;
height: 150px;
border: 1px solid #e4e4e4;
animation: bgscroll 120s infinite linear;
-webkit-animation:bgscroll 120s infinite linear;
-moz-animation:bgscroll 120s infinite linear;
-o-animation:bgscroll 120s infinite linear;
}

@keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-moz-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}
@-o-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:-2975px 0;}
}

Działa na zasadzie, że bezustannie przesuwa tło w divie w lewo. O ile działa na przeglądarkach typu firefox, chrome, safari, to z jakiegoś powodu nie mogę tego uruchomić na moim Internet Explorer 11.  Pomoże ktoś?
 

Xardas47

Xardas47

Użytkownicy
Mhroczny charakterek
posty251
Propsy150
ProfesjaProgramista
  • Użytkownicy
  • Mhroczny charakterek
 

Caesum

Caesum

Użytkownicy
posty1731
Propsy2207
NagrodyV
Profesjabrak
  • Użytkownicy
Dalej nic.
 

RafalBudzis

RafalBudzis

Użytkownicy
posty1973
Propsy807
ProfesjaSkrypter
  • Użytkownicy
Może form- to zamień na 0% - 100% ? Z IE to zawsze zgadywanie.

@keyframes bgscroll {
    0% {background-position:0 0;}
    100% {background-position:-2975px 0;}
}

Caesum

Caesum

Użytkownicy
posty1731
Propsy2207
NagrodyV
Profesjabrak
  • Użytkownicy
Już próbowałem, też nie działa. :(
 

chicken

chicken

RaveN Studio
posty1231
Propsy557
ProfesjaNierób
  • RaveN Studio
RafalBudzis dał dobre rozwiązanie, ale spróbuj nie zaczynać od wartości zerowej dla background-position.
Nie testowałem

RafalBudzis

RafalBudzis

Użytkownicy
posty1973
Propsy807
ProfesjaSkrypter
  • Użytkownicy
Już próbowałem, też nie działa. :(

To zrób to po staremu

<div z overflow hidden>
<div z tłem i szerokością 2 razy większą niz tło></div>
</div>

A potem na JS w "petli" na setTimeOut przesuwasz div`a który jest w środku. I bedzie działać na 100 % :D

Caesum

Caesum

Użytkownicy
posty1731
Propsy2207
NagrodyV
Profesjabrak
  • Użytkownicy
Nie bardzo się znam na javascript, ale spróbuję, dzięki. Będzie to działać z divem rozszerzającym się na pusty obszar?

O problemach IE z 0 już słyszałem. W moim kodzie występuje zamiast 0 - 0.1
 

RafalBudzis

RafalBudzis

Użytkownicy
posty1973
Propsy807
ProfesjaSkrypter
  • Użytkownicy
Będzie to działać z divem rozszerzającym się na pusty obszar?

Jeśli div będzie miał overflow:hidden i ustaloną wysokość i szerokość to będzie obcinał obiekty wewnętrzne.


Chyba o to pytałeś jeśli nie to rozwiń temat.

Caesum

Caesum

Użytkownicy
posty1731
Propsy2207
NagrodyV
Profesjabrak
  • Użytkownicy
Nie pisałem o tym, że ma ustaloną szerokość, napisałem tylko, że chcę, by tło się w nim przesuwało.

Ogólnie chcę, żeby efekt był taki jak tutaj: http://forum.thesims.pl/index.php
Uruchomcie na czymkolwiek innym niż Internet Explorer a zobaczycie o co chodzi.
 

RafalBudzis

RafalBudzis

Użytkownicy
posty1973
Propsy807
ProfesjaSkrypter
  • Użytkownicy
Cały kod HTML

<td id="headlogo2">
<div>

<div style="overflow:hidden; width:auto; height:120px; position:relative;">

<div style="
background: url(http://i.imgur.com/nr9dJcU.jpg) repeat center top;
height: 120px;
width: 6000px;
position: absolute;
top: 0px;
left: -3px;/* TEN ATRYBUT ZMIENIASZ JSem ABY DIV Z TŁEM SIĘ RUSZAŁ */
"> </div>

</div>
</div>
</td>

z Headlogo2 usuń te tło i już będziesz miał statyczne tło
potem w JS zmieniasz tylko zznaczony parametr left


0 użytkowników i 1 Gość przegląda ten wątek.
0 użytkowników
Do góry