主页 / 问题 / 1279583
Accepted
Sevastopol'
Asked:2022-05-08 20:07:41 +0000 UTC2022-05-08 20:07:41 +0000 UTC

根据正在查看的内容，参考页面滚动在地图上的点之间绘制单独的路径

  • 772

我有一张坐标用点标记的地图。坐标是铺设路径的城市（SVG path）：

地图图像

我也有一个带有文本的 HTML 页面。这是完整的代码，包括包含path点之间的五个单独路径 ( ) 的 SVG 元素：

* {margin: 0; padding: 0;}

.map {
  z-index: -1;
  position: fixed;
  left: 200px;
  top: 0;
}

.container {
  z-index: 1;
  width: 200px;
  padding: 0 50px;
  background: rgba(105, 105, 105, 0.5);
}
<!--Контейнер с картой-->
<div class="map">
<svg id="svg__map" viewBox="0 0 2000 1200" width="1066" height="674">

<!--Карта-->
<g><image width="1066" height="674" href="https://i.imgur.com/XJuEphL.jpg"></image></g>

<!--Путь от A до B-->
<path id="path1" class="path1" fill="none" stroke="#663300" stroke-width="5px" d="m 1006.6935,300.78037 c -13.55545,29.46202 -27.11017,58.92249 -67.74599,70.14934 -40.63581,11.22686 -108.35019,4.21965 -147.13455,11.65573 -38.78435,7.43609 -48.63328,29.31505 -58.48177,51.19306" />

<!--Путь от B до C-->
<path id="path2" class="path2" fill="none" stroke="#663300" stroke-width="5px" d="m 733.33119,433.7785 c -82.33315,24.09565 -164.66581,48.19116 -211.78405,77.70384 -47.11823,29.51267 -59.0192,64.44082 -70.91984,99.368" />

<!--Путь от C до D-->
<path id="path3" class="path3" fill="none" stroke="#663300" stroke-width="5px" d="m 450.6273,610.85034 c -40.2612,17.04533 -80.51892,34.08919 -105.72098,31.21185 -25.20205,-2.87734 -35.34421,-25.6782 -45.48659,-48.47955" />

<!--Путь от D до E-->
<path id="path4" class="path4" fill="none" stroke="#663300" stroke-width="5px" d="m 299.41973,593.58264 c -3.42221,-25.74545 -6.84463,-51.49251 15.38407,-59.43661 22.2287,-7.94411 70.10773,1.91513 103.14042,-11.8242 33.0327,-13.73933 51.21935,-51.07636 69.40684,-88.41511" />

<!--Путь от E до F-->
<path id="path5" class="path5" fill="none" stroke="#663300" stroke-width="5px" d="m 487.35106,433.90672 c -28.94353,0.82098 -57.88415,1.64188 -84.24414,-21.98436 -26.35998,-23.62623 -50.13229,-71.6952 -78.04729,-85.49903 -27.91501,-13.80383 -59.96879,6.66336 -92.02183,27.13006" />

</svg>
</div>

<!--Контейнер с текстом-->
<div class="container">

<!--Пунк A-->
<div class="item__a">
<h2>Пунк A</h2>
<div class="text__about">
<p>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк B-->
<div class="item__b">
<h2>Пунк B</h2>
<div class="text__about">
<p>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк C-->
<div class="item__c">
<h2>Пунк C</h2>
<div class="text__about">
<p>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк D-->
<div class="item__d">
<h2>Пунк D</h2>
<div class="text__about">
<p>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк E-->
<div class="item__e">
<h2>Пунк E</h2>
<div class="text__about">
<p>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк F-->
<div class="item__f">
<h2>Пунк F</h2>
<div class="text__about">
<p>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

</div>

问题：如何根据正在查看的 HTML 内容，分别使用指向页面滚动的链接来启动每个路径的绘制动画？每个带有城市信息的 HTML 片段的标记如下所示，例如 item B：

<!--Пунк B-->
<div class="item__b">
<h2>Пунк B</h2>
<div class="text__about">
<p>пунк b</p>
</div>
<div class="text__other">
<p>текст</p>
</div>
</div>

item__b是包含城市信息的 HTML 片段的父元素B。当这个元素的顶部接触到浏览器窗口的底部时，从点到点的路径在A点B结束B。

text__about— 当滚动这个元素时，什么也没有发生；

text__other- 当滚动这个元素时，当它的上部接触到浏览器窗口的下部时，开始绘制从点到点的B路径C。并在元素顶部item__с触及浏览器窗口底部时结束；

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身。

javascript

1 个回答

  1. Best Answer

    该问题未指定匹配路径的原则class="item__?"。Ypath-ей仅指定id，如何与之比较class="item__e"尚不完全清楚。我们将假设第一个path是指第一个可用块。最后一个城市的描述，据我了解，不影响渲染，因为 我们已经达到了。

    引用
    “text__other - 当滚动此元素时，它的顶部触及浏览器窗口的底部”（c）

    这种行为不是很适合第一块text__other。在第一个中， <div class="item__b">other-block 已经在窗口的底部边框之上。

    路径预渲染选项：

    1. 确定已经在窗口底部边框上方的其他块并立即绘制它们。
    2. 美丽需要牺牲和时间 - 在第一次尝试滚动时被迫动画（在加速模式下）。

    在这样的任务中，更容易扔出一张图片，并且它会立即变得更清楚该往哪个方向移动：

    在此处输入图像描述

    位置scroll将需要优化搜索，并且块的显示更容易确定使用getBoundingClientRect()。

    第2段的解决方案，用动画渲染，我会离开@Sevastopol'的肩膀
    不要忘记点击“整页”

    function rangeCalculator(begin, end, beginRange = 0, endRange = 100) {
  const inputRange = end - begin
  const outRange = endRange - beginRange
  return /*calculate*/(current) => (
    beginRange + (outRange / (inputRange / (current - begin)))
  )
}

// Предоставляет все методы отрисовки path
function Item(path, block, nextBlock, isEndBlock) {
  const pathLength = path.getTotalLength()
  path.style.strokeDasharray = pathLength
  path.style.strokeDashoffset = pathLength
  const other = block.querySelector('.text__other')

  const min = () => path.style.strokeDashoffset = pathLength
  const max = () => path.style.strokeDashoffset = 0

  return {
    draw() {
      // Проверяем подходит ли нам позиция Scroll
      // По условию:
      // + верх нашего `block` должен находится выше низа окна просмотра
      // + а `nextBlock` ниже
      const wh = window.innerHeight
      const selfPosition = block.getBoundingClientRect().top
      const endPosition = nextBlock.getBoundingClientRect().top
      if (wh < selfPosition ||
        // За последним блоком может быть все что угодно,
        // он в любом случае попадает в свой диапазон.
        // endPosition только для НЕ-isEndBlock
        (!isEndBlock && wh > endPosition)) {
        return false
      }
      // Прерываем дальнейшие операции, если уже вышли за пределы endPosition последнего блока
      if (isEndBlock && endPosition < wh) {
        max()
        return true
      }
      // Подходит ли нам диапазон для отрисовки
      const startPosition = other.getBoundingClientRect().top
      if (wh >= startPosition) {
        // const range = startPosition - endPosition
        path.style.strokeDashoffset = pathLength - rangeCalculator(
          startPosition,
          endPosition,
          0,
          pathLength
        )(wh)
      }
      // ... если нет, то мы находимся в мертвой зоне, где path = 0
      else {
        min()
      }
      return true
    },
    min,
    max
  }
}

// Сопоставление информационных блоков и path-ей
function Collector() {
  const paths = Array.from(document.querySelectorAll('.map path'))
  const infoBlocks = Array.from(document.querySelectorAll('.container [class^="item__"]'))
  const map = []
  for (let i = 0; i < paths.length; ++i) {
    map.push(Item(
      paths[i],
      infoBlocks[i],
      infoBlocks[i + 1],
      // Флаг последнего блока
      i === paths.length - 1
    ))
  }
  return map
}

// Главный объект отрисовки - управляет всеми path-ами
function Draftsman() {
  const htmlElem = document.querySelector('html')
  const paths = Collector()

  // Индекс последнего отрисованного path
  let currentIndex = 0
  // Последняя позиция scroll
  let oldScrollPosition = 0

  // Поиск с вызовом отрисовки path
  const find = (i, step, finish) => {
    do {
      if (paths[i].draw()) {
        currentIndex = i
        return
      }
      // Текущий должен быть дорисован в соответствующую стророну
      paths[i][finish]()

    } while ((i = step()) !== false)
  }

  const scroll = () => {
    const top = htmlElem.scrollTop
    // Будем искать путь начиная с последнего currentIndex, чтобы не перебирать все path-и
    // В большинстве случаев, последний path попадется первым
    let i = currentIndex
    // ... и в ту сторону, в которую провернулся Scroll
    if (top > oldScrollPosition) {
      find(i, () => ((i === paths.length) ? false : i++), 'max')
    } else {
      find(i, () => ((i === -1) ? false : i--), 'min')
    }
    oldScrollPosition = top
  }

  let enabled = false
  return {
    enable(status) {
      if (status) {
        if (enabled) return
        enabled = true
        scroll()
        document.addEventListener('scroll', scroll)
      } else {
        if (!enabled) return
        enabled = false
        document.removeEventListener('scroll', scroll)
      }
    }
  }
}

// Запускаем
Draftsman().enable(true)
    * {
  margin: 0;
  padding: 0;
}

.map {
  z-index: -1;
  position: fixed;
  left: 200px;
  top: 0;
}

.container {
  z-index: 1;
  width: 200px;
  padding: 0 50px;
  background: rgba(105, 105, 105, 0.5);
}
    <!--Контейнер с картой-->
<div class="map">
  <svg id="svg__map" viewBox="0 0 2000 1200" width="1066" height="674">

      <!--Карта-->
      <g x="0" y="0">
        <image width="1066" height="674" href="https://i.imgur.com/XJuEphL.jpg"></image>
      </g>

      <!--Путь от A до B-->
      <path id="path1" class="path1" fill="none" stroke="#663300" stroke-width="5px"
        d="m 1006.6935,300.78037 c -13.55545,29.46202 -27.11017,58.92249 -67.74599,70.14934 -40.63581,11.22686 -108.35019,4.21965 -147.13455,11.65573 -38.78435,7.43609 -48.63328,29.31505 -58.48177,51.19306" />

      <!--Путь от B до C-->
      <path id="path2" class="path2" fill="none" stroke="#663300" stroke-width="5px"
        d="m 733.33119,433.7785 c -82.33315,24.09565 -164.66581,48.19116 -211.78405,77.70384 -47.11823,29.51267 -59.0192,64.44082 -70.91984,99.368" />

      <!--Путь от C до D-->
      <path id="path3" class="path3" fill="none" stroke="#663300" stroke-width="5px"
        d="m 450.6273,610.85034 c -40.2612,17.04533 -80.51892,34.08919 -105.72098,31.21185 -25.20205,-2.87734 -35.34421,-25.6782 -45.48659,-48.47955" />

      <!--Путь от D до E-->
      <path id="path4" class="path4" fill="none" stroke="#663300" stroke-width="5px"
        d="m 299.41973,593.58264 c -3.42221,-25.74545 -6.84463,-51.49251 15.38407,-59.43661 22.2287,-7.94411 70.10773,1.91513 103.14042,-11.8242 33.0327,-13.73933 51.21935,-51.07636 69.40684,-88.41511" />

      <!--Путь от E до F-->
      <path id="path5" class="path5" fill="none" stroke="#663300" stroke-width="5px"
        d="m 487.35106,433.90672 c -28.94353,0.82098 -57.88415,1.64188 -84.24414,-21.98436 -26.35998,-23.62623 -50.13229,-71.6952 -78.04729,-85.49903 -27.91501,-13.80383 -59.96879,6.66336 -92.02183,27.13006" />

    </svg>
</div>

<!--Контейнер с текстом-->
<div class="container">

  <!--Пунк A-->
  <div class="item__a">
    <h2>Пунк A</h2>
    <div class="text__about">
      <p>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк B-->
  <div class="item__b">
    <h2>Пунк B</h2>
    <div class="text__about">
      <p>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк C-->
  <div class="item__c">
    <h2>Пунк C</h2>
    <div class="text__about">
      <p>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк D-->
  <div class="item__d">
    <h2>Пунк D</h2>
    <div class="text__about">
      <p>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d
        <br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d
        <br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк E-->
  <div class="item__e">
    <h2>Пунк E</h2>
    <div class="text__about">
      <p>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e
        <br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e
        <br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк F-->
  <div class="item__f">
    <h2>Пунк F</h2>
    <div class="text__about">
      <p>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f
        <br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f
        <br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

</div>

    • 4

相关问题