Подскажите пожалуйста, как проще всего разметить такую вот шляпу? это

Question

Подскажите пожалуйста, как проще всего разметить такую вот шляпу? это

лифты, и они должны кататься по этажам. Пока что у меня нет мыслей, кроме как сделать грид контейнер и внутри него транслейтом перемещать блоки, но не уверен, что это лучшая идея

#javascript #programming #russian

0

10.03.2022

12 ответов

34 просмотра

Nick Автор вопроса

Bohdan Bida 🇺🇦
Меняй динамически margin-bottom и на него транзишн...

хм. а по разметке тогда как? 5 блоков, по которым лифт будет двигаться, а "этажи" как? т.е горизонтальные линии. Разве без сетки получится так сделать?

0

10.03.2022

Bohdan Bida 🇺🇦

Nick
хм. а по разметке тогда как? 5 блоков, по которым ...

5 контейнеров внутри которых лифты, можно конечно флексом опустить каждый лифт вниз а дальше двигать только марджином А линии я бы вообще не стал делать через позиционирование а сделал бы через фон (градиент линейный например)

0

10.03.2022

Nick Автор вопроса

Bohdan Bida 🇺🇦
5 контейнеров внутри которых лифты, можно конечно ...

Я не представляю, как градиентом вырисовывать линии. Ровно вряд ли встанет, там ещё сбоку кнопки вызова

0

10.03.2022

Bohdan Bida 🇺🇦

Nick
Я не представляю, как градиентом вырисовывать лини...

Если высота этажа всегда фиксированная то станет Глянь в доке линейный градиент, там есть примеры как делать его не плавным а резким, полосками Тогда можешь сделать одну полоску прозрачной размером с этаж а другую тёмной в пару пикселей

0

10.03.2022

Nick Автор вопроса

Bohdan Bida 🇺🇦
Если высота этажа всегда фиксированная то станет ...

Благодарю

0

10.03.2022

Andrey Iv

Bohdan Bida 🇺🇦
Меняй динамически margin-bottom и на него транзишн...

Забавное решение! Сверхпростое. Но, кажется, если элементу сделать float и менять margin top, то наверное ещё проще получится...

0

10.03.2022

Bohdan Bida 🇺🇦

Andrey Iv
Забавное решение! Сверхпростое. Но, кажется, если ...

Как вариант

0

10.03.2022

Andrey Iv

Bohdan Bida 🇺🇦
Как вариант

Сделал лифт ) от скуки <html> <head> <meta name="viewport" content="width=device-width"> </head> <script> //Called after application is started. function Start(){ //alert('start') topp=0; function maina(){ //alert('maina top='+topp) if(topp>=500)return virra() topp++ lift.style['margin-top']=topp setTimeout(maina, 10) } function virra(){ if(topp<=0)return maina() topp-- lift.style['margin-top']=topp setTimeout(virra, 10) } maina() } </script> <style> .shahta{float: left; width:50px; height:500px; background: blue; } #lift{float: left; width: 100px; height: 50px; background: red; margin-top:100px;} </style> <body onload="Start()"> <hr> <div id=game> <div class=shahta> 1 </div> <div id=lift> </div> <div class=shahta> 2 </div> </div> </body> </html>

0

10.03.2022

Taras Karpyn

Andrey Iv
Сделал лифт ) от скуки <html> <head> <meta nam...

такие таланты пропадают

0

10.03.2022

Nick Автор вопроса

Andrey Iv
Сделал лифт ) от скуки <html> <head> <meta nam...

О, а давай за меня тестовое сделаешь?)

0

10.03.2022