[k.....w]

Postać wykonana w czystym CSS prawie gotowa. Dorobię jeszcze przyciski akcji: "lewa noga do przodu", "skrzydła w górę", itd. Dopiero na samym końcu dojdzie javascript (bez bibliotek), który zapanuje nad przyciskami i je ukryje, by kura ożyła. Całość wraz z teksturami gif zajmuje jedynie 0,01MB

poprzedni wpis
#css #webdev #html #css3 #programujzkardawem #chwalesie #minecraft

[rbielawski]

@kardaw: mysle, ze nawet te akcje daloby sie zrobic bez javascriptu
(uzywajac checkboxow/radio, cos w stylu input[value="skrzydlaDoGory"]:checked ~ .skrzydla { /*css*/ })

[k.....w]

@rbielawski: #wings_up:checked ~ #ground > #trunk > ...{ ... }
Właśnie tak będzie działać.
Javascript jedynie będzie zmieniał automatycznie wartości checkboxów. A z animation w CSS zrezygnuję, bo animation i transition się nie lubią.

[rbielawski]

@kardaw: fakt, nie lubia sie - jak chcesz uzywac jednego i drugiego naraz, to najlepiej chyba robic jakies wrappery, tak zeby nie laczyc obu tych wartosci w jednym elemencie.
ja to zrobilem tak kiedys: http://rbielawski.pl/person (prawdopodnie moze sie sypac pod nie-chromem ;); na oczach jest i animacja, i transition na :hoverze)

[k.....w]

@rbielawski: No tak, ale straciłbym dużo na przejrzystości w pliku html. Po za tym kura ma się losowo poruszać, a nie działać na gotowych slajdach. Np. doczepię animacje (CSS) do nóg, a gdy nadejdzie czas, że kura się zatrzyma, to nogi niestety nie przejdą płynnie w stan neutralny.
Lepszym rozwiązaniem będzie setTimeout z funkcją w JS, który przełącza przyciski radio wtedy, gdy kura się porusza.

[rbielawski]

@kardaw: jasne, zalezy od tego co chcesz osiagnac. Ogolnie szacun za to co robisz ;)

[r.....y]

@kardaw: ale piękna!