Как такое сверстать?

Question

[Александр Осадчий]

Здравствуйте!

Есть вот roadmap - как есго сверстать..да еще и адаптивно(

Может у кого есть что-то похожее на примете?

Comments

[Kovalsky]

https://uicookies.com/css-timeline/, не знаю есть ли там точно такое, но варианты точно можно там подглядеть

Answer 1

[RAX7]

Держи, немного поправил один из своих старых набросков.

Принцип работы примерно, как описал Максим Морев в своем ответе.

Comments

[Максим Морев]

Поизящнее, чем у меня - я в лоб решал локальную задачу, тут уже почти готовая универсальная либа.
Предусмотреть динамическое количество элементов в колонках, добавить внешнее API и вперёд, к мировой известности :))
Респект.

[RAX7]

Максим Морев, да нее, для библиотеки слишком уж редкая задача делать подобное. Это тот самый случай, когда проще форкнуть и допилить напильником под свои нужды. Но спасибо за идею =)

Answer 2

[Максим Морев]

Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").



Идея, вкратце:

1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
   
2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
   
3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
   
4. Динамически рисуете SVG по вашим ключевым точкам.
   О том, какие варианты вообще есть, можно почитать на MDN, например.
   Выглядеть это будет примерно так:
   
   
   
   В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
   
5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
   
6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
   

Это в целом чёрная магия, можно полдня убить, но красиво :)
Если это всё очень сложно, то просто картинкой вставьте, высоту элементов фиксируйте, и меняйте картинку для адаптивных вариантов.

Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)

Comments

[Максим Морев]

Максим Ленский, чего, прости? :) Какой аккордеон, какой не замедленный?

[Максим]

вот этот элемент называется аккордион - делали не вы сайт

[Максим Морев]

Максим Ленский, я не понимаю, чего вы от меня хотите и какое это отношение имеет к вопросу. Потому из обсуждения выхожу.
То, что не я делал - заявление забавное, но кому-то чего-то доказывать мне неинтересно :)

[Максим]

Максим Морев, очевидное решение ... взаимно ... вы код не знаете ..по просту того что не знаете даже обычного названия

[Rustam Bainazarov]

Максим Ленский, я тоже не понял, при чём тут этот аккордеон и как он доказывает то, что автор ответа не делал эту временну́ю шкалу. Неудивительно, что он и не понял, о чём речь, ведь вопрос вообще о другом.

[Максим]

Рустам Байназаров, я поставил плюс автору этого ответа и написал что сайт мне понравился но и так же написал что если он для акордиона добавит transition это бдет круто ..он сказал что так

чего, прости? :) Какой аккордеон, какой не замедленный?

-к вопросу не относится это ....это просто вывод для меня

[Hyubert]

Максим Морев, Здравствуйте, отлично выглядит! А не подскажите как вы считаете угол стрелки на всей протяжности линии? Буду очень благодарен. Спасибо.

[lUser L]

Максим Морев, сори за фоотоп, но мне интересно, как называется тема (насколько я понял это срин из редактора vs code) в вашем ответе ?

[Максим Морев]

Hyubert, спасибо :)

Примерно так:

function getAngleBetween(newPoint, oldPoint) {
  const dy = (newPoint.y - oldPoint.y);
  const dx = (newPoint.x - oldPoint.x);
	
  const theta = Math.atan2(dy, dx);
  const angle = (((theta * 180) / Math.PI)) % 360;

  return (angle < 0) ? 360 + angle : angle
}

const percent = clamp((scrollTop + halfWindowHeight - stepsOffset) / stepsHeight, 0, 1);

const prevArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent - .001));
const currentArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent));
const angle = getAngleBetween(prevArrowPoint, currentArrowPoint) + 180;

stepsArrow.setAttribute('transform', `translate(${prevArrowPoint.x - 6} ${prevArrowPoint.y - 11}) rotate(${angle}, 6, 11) `);

[Максим Морев]

Эмиль 🔥, это Material Last с некоторыми кастомизациями.
По цветам кастомизации незначительные, из значимого - шрифт у меня установлен "Courier New" вместо дефолтного.

[Hyubert]

Максим Морев, Спасибо за ответ!

[lUser L]

Максим Морев, спасибо

Answer 3

[Константин Лизунов]

Вот тут примерно такой же timeline, должно помочь.
https://codepen.io/letsbleachthis/pen/YJgNpv

Answer 4

[Иван В]

Если верстать с нуля, структура примерно такая:

<div class="road" style="display: flex; justify-content: space-between; position: relative;"> 

  ::before (картинка с полоской уходящей вверх)

  <div class="road__line" style="width: 100%; position: absolute;"> 
      прямая полоска  
  </div>
  <div class="road__point"> 
      ...
  </div>
  <div class="road__point"> 
      ...
  </div>
  <div class="road__point"> 
      ...
  </div>

  ::after (картинка с полоской уходящей вниз)
</div>