Как сделать такой эффект?
Как сделать вот такую фичу?Этот что-то типо калькулятора для одной игры. При выборе двух планет, показывает сколько топлива для этого нужно.При этом пропадает все лишнее и подсвечивается только сам путь.А при наведении на какой нибудь конкретный этап (панелька справа) подсвечивается конкретно этот этап.Левая часть максимально адаптивна, и выглядит вообще как картинка.Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?
Карта в обычном виде:
Карта когда есть две выбранные планеты:
Карта когда наводишь на конкретный этап полета:
Если что, вот сам сайт: https://ksp.loicviennois.com/
Всем спасибо.
Дополнительно:
Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?
- Svg, с расположением каждой части в нужном месте, например: d: path("M 1072.8 952.661 V 336.358").
- Каждый элемент svg имеет свой id (например: id="path12523-5"), к которому можно обратиться из css/js.
- Для каждого разрешения дисплея - отдельный svg, но со старыми id.
- JS передает логику по id элементов в svg, не задумываясь, как они там расположены.
КартинкО
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания эффекта подсветки синтаксиса кода всех языков программирования на вашем сайте, вы можете использовать тег
. Этот тег позволяет указать язык программирования, для которого нужно осуществить подсветку синтаксиса кода. Пример использования тега <pre lang="php"> для подсветки синтаксиса кода на вашем сайте: <pre lang="php">
В приведенном примере код на языке PHP будет подсвечен и отформатирован для лучшей читаемости. Вы можете использовать этот тег для любого языка программирования, просто заменяя "php" на соответствующий язык (например, "java", "python", "html" и т. д.).
Таким образом, вы сможете представить код на вашем сайте в более удобной и привлекательной форме для пользователей, что сделает его более понятным и легким для чтения. Надеюсь, это решит вашу проблему и поможет улучшить визуальное представление кода на вашем сайте.