CCS3 - Transformacje nie działają w Mozilli


(artnew) #1

Witam!

 

Dopiero zaczynam zabawę z CSS3 na przykładzie własnego portfolio i niestety już pojawił się drobny problem, którego nie potrafię przeskoczyć. Mam na stronie div z obrazkiem, któremu przypisałem w stylach delikatne transformacje. Wyczytałem, że aby działały one także pod innymi przeglądarkami (w Chrome wszystko działa jak należy) trzeba dodać dodatkowe polecenia - mam kod jak poniżej:

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
    opacity: 1.0;
  }
  50% {
    -moz-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
	-webkit-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
	-o-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
	-ms-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
	transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 1.0;
  }
}

.pulse { 
  opacity: 1; 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 10s; 
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: pulse; 
  -moz-animation-duration: 10s; 
  -moz-animation-iteration-count: infinite;
}

Niestety animacja działa tylko w Chromie, ani w Firefoxie ani w nowszym IE obrazek się nie rusza. Być może jest tu jakiś błąd, którego nie widzę, dlatego proszę o pomoc kogoś z większym doświadczeniem w tej kwestii :wink:

 

Przy okazji chciałem jeszcze spytać o jedną rzecz. Na stronie http://galaxy.fili.nl/ jest taki myk, że jak ruszamy myszką to delikatnie przesuwają się warstwy z obrazkami tworząc wrażenie dwuwymiarowej sceny (nie bardzo wiem jak to opisać, trzeba zobaczyć). Przyznam, że szukałem jakichś tutoriali na ten temat, ale nic sensownego mi nie wpadło w ręce, nawet nie bardzo wiem jakimi frazami się posługiwać, jakie polecenia odpowiadają za te efekty itepe. Również prosiłbym o jakieś naprowadzenie.

 

Z góry dzięki za pomoc!


(kostek135) #2
  1. Popatrz na pierwszą linijkę swojego kodu

(artnew) #3

Poprawiłem, działa, ogromne dzięki! A jakaś wskazówka odnośnie tej drugiej animacji, chociaż jakich haseł szukać? Ktoś wie? :wink:


(kostek135) #4

Sądzę, że samym CSS nie zrobisz tego.

Teraz pozostaje ci znaleźć inną funkcję niż mousedown, tylko taką, która odpowiada za odpalanie eventu, kiedy jesteśmy nad danym elementem.


(artnew) #5

Znalazłem coś takiego: http://wagerfield.github.io/parallax/, można tu pobrać paczkę z gotowym skryptem Java :slight_smile: Dzięki za odpowiedzi!

Witam ponownie!

Nie chcę zakładać nowego tematu więc napiszę tu. Pojawił się nowy problem przy tworzeniu strony - mam menu zrobione przy użyciu listy. Wszystkie style są poprawne, całe menu bardzo ładnie się wyświetla we wszystkich przeglądarkach, ale tylko offline. Po wgraniu strony na serwer niestety w Chromie nie pojawiają się adnotacje pod pozycjami w menu, natomiast w innych przeglądarkach wszystko jest w porządku. Usuwałem pamięć podręczną, ale nic to nie dało. Na innych komputerach też występuje ten problem także wina musi leżeć gdzieś indziej, ale kompletnie nie mam pomysłu gdzie. Wgrywałem stronę w 100% działającą, a tu takie niespodzianki…

Tak jest:

http://artnew.ovh.org/Untitled-2.jpg

A tak powinno być:

http://artnew.ovh.org/Untitled-1.jpg

Proszę korzystać z opcji Edytuj , zamiast pisać post pod postem.

rgabrysiak