[rukh]

#cssdemo #html #css #grafika #grafika3d #webdev →starsze wpisy←

Bardzo rzadko coś udostępniam i porabiam w html'u, ale tym razem chciałem się pochwalić dziełem - Schody ruchome (⌐ ͡■ ͜ʖ ͡■)
Nie jest to winda, o której myślałem 1,5 roku temu, ale zawołam komentujących pod starym wpisem - @h3xxx @garsi @marcinzwwa @macjan_666

Udostępniam kod CSS do starej pracy, w której użyłem JS jedynie do uzupełnienia CSS'a, by obliczyć współrzędne. LINK

W poniższej animacji nie użyłem ani linijki kodu w skrypcie. Jedynie czysty CSS, w którym można przestawiać bloczki na stronie, i animować i zmieniać właściwości gdy html-owy ☑ "checkbox" jest wciśnięty. Np.:

#przycisk: checked ~ #prostokat { backgroud-color: green; }

Co oznacza - jeśli ☑ o nazwie "przycisk" jest przyciśnięty, to zaaplikuj na "prostokat" zielony kolor.
Czyli jak odznaczymy przycisk, to prostokąt przestaje być zielony.
☑ można ukryć, i np. cała skrzynia jak w powyższym przykładzie jest taką kopią tego przycisku, odnośnikiem. Klikniesz w skrzynie, to ta skrzynia przyciśnie ukryty przycisk za ciebie - i wtedy np. skrzynia się otworzy.

Przez te lata jednak mój kod stał się bardziej przejrzysty. Dużo w tym nie siedzę. Tak jak te skrzynie z powyższego linku, kod jest za mało wydajny. CSS traci na wydajności jeśli tak kopiujemy właściwość CSS dla każdego z elementu (prostokąta) z osobna

- czyli coś tego typu:
"niech ten prostokąt będzie niebieski, niech ten prostokąt będzie niebieski, i jeszcze ten, .."
- zamiast tego wydajniejszy kod:
"pogrupuję te wszystkie prostokąty, i wszystko co znajdzie się w grupie będzie niebieskie"

Taka sytuacja jest oczywista, ale staje się to zagmatwane, gdy kodu zaczyna przybywać i przybywać.

Schody w 26 KB (sam tekst, brak tekstur):

[rukh]

Widok z góry,
bez "perspective: 2000px; " i "transform: rotateX(60deg); "

[dqdq1]

@rukh: super! Chetnie zobaczylbym ten kod, bedziesz udostepnial czy zostanje to tajemnica?( ͡° ͜ʖ ͡°)