Как реализовать данныйю блок?

Question

[SerjAndreev]

Как можно реализовать сие чудо ?

Answer 1

[RAX7]

Можно нарисовать полоску на svg с помощь js и анимировать её через stroke-dashoffset

Comments

[SerjAndreev]

У меня тоже самое , не знаю как прикрутить добавление классов при прохождении анимации

[RAX7]

SerjAndreev, покажи код, вместе подумаем

[SerjAndreev]

RAX7,

function scroller(){
    var path = document.querySelector('#road2'),
        pathLength = path.getTotalLength(),
        elem = document.getElementsByClassName('project-item');

    path.style.strokeDasharray = pathLength + ' ' + pathLength;
    path.style.strokeDashoffset = pathLength;
    path.getBoundingClientRect();

    window.addEventListener("scroll", function(e) {

          var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight),
              drawLength = pathLength * scrollPercentage;
 
          path.style.strokeDashoffset = pathLength - drawLength;
        
          if (scrollPercentage >= 0.99) {
              path.style.strokeDasharray = "none";
          } else {
              path.style.strokeDasharray = pathLength + ' ' + pathLength;

          }
    });
}
scroller();

<div class="project-bg">
                <svg class="round round-one" xmlns="http://www.w3.org/2000/svg" width="100%" height="435" viewBox="0 0 1146 435">
                  <path id="road1" class="cls-1" d="M150,1272H1240a50.063,50.063,0,0,1,50,50.12v330.76a50.063,50.063,0,0,1-50,50.12H294" transform="translate(-146 -1270)"/>
                  <path id="road2" class="cls-2" d="M150,1272H1240a50.063,50.063,0,0,1,50,50.12v330.76a50.063,50.063,0,0,1-50,50.12H294" transform="translate(-146 -1270)"/>
                </svg>
              </div>

На jf заливаю все плывет

[RAX7]

SerjAndreev,

не знаю как прикрутить добавление классов при прохождении анимации

вот тебе типа классы при прохождении анимации
https://jsfiddle.net/aexkc0qb/

[SerjAndreev]

RAX7, извените меня, я не совсем то имел веду, У меня свг с кодом в роли backgrounda а сверху наложен блок с блоками и при прохождении анимации при скроле поочереднопо змейке на каждый блок должен навешиваться класс с анимацией и кружок перерисовываться в галочку. Как на картинке.
Вот пример html кода который накладывается сверху на змейку.

<div class="project-mab-fg">
                <div class="project-map" id="test">
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Идея</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Проработка плана</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/апрель 2019</div>
                      <div class="project-item-text">Разработка сайта</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019</div>
                      <div class="project-item-text">Регистрация/открытие компании</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019  </div>
                      <div class="project-item-text">Набор сотрудников</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">январь/февраль 2019</div>
                      <div class="project-item-text">Подготовка всей документации и инструментов</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">февраль 2019</div>
                      <div class="project-item-text">Производство карт</div>
                    </div>
                  </div>
                  <div class="project-item project-item-bot">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">март 2019</div>
                      <div class="project-item-text">Запуск официальных страниц в социальных сетях</div>
                    </div>
                  </div>
                  <div class="project-item project-item-top">
                    <div class="project-item-wrap">
                      <div class="project-item-rect"></div>
                      <div class="project-item-date">декабрь 2018</div>
                      <div class="project-item-text">Идея</div>
                    </div>
                  </div>

[RAX7]

SerjAndreev, тогда я вообще ничего не понял. Залей в песочницу рабочий код.

[SerjAndreev]

RAX7, https://jsfiddle.net/narkess/by5036ed/ на точки надо навешать класс, я уже 3 дня сижу., никак не получается.
Я там залил все , так как плывет все

[RAX7]

SerjAndreev, ну самая топорная реализация прописать к каждому блоку соответствующий процент скрола

const elsMap = document.getElementById('test').children;
const mapItemsPersent = [
  {roadPersent: 2,  targetEl: elsMap[0]},
  {roadPersent: 8,  targetEl: elsMap[1]},
  {roadPersent: 16, targetEl: elsMap[2]},
  {roadPersent: 23, targetEl: elsMap[3]},
  {roadPersent: 30, targetEl: elsMap[4]},
  {roadPersent: 37, targetEl: elsMap[5]},
  {roadPersent: 67, targetEl: elsMap[11]},
  {roadPersent: 74, targetEl: elsMap[10]},
  {roadPersent: 82, targetEl: elsMap[9]},
  {roadPersent: 89, targetEl: elsMap[8]},
  {roadPersent: 96, targetEl: elsMap[7]},
  {roadPersent: 100, targetEl: elsMap[6]},
];

https://jsfiddle.net/mg2ajkp7/

[SerjAndreev]

RAX7, Вы гений, только вот пришлось переделать svg(((
Как можно реализовать этот способ с добавлением класса только до класса active
например .blok .blok .blok .blok .blok как только встречаем .blok.active перестаем раздавать класс.
Только в реализации с данным скриптом что ниже.

var ProgressScroll = function () {
  var s = void 0;

  return {
    settings: function settings() {
      return {
        top: $('.progress-top'),
        right: $('.progress-right'),
        mid: $('.progress-mid'),
        left: $('.progress-left'),
        bottom: $('.progress-bottom'),
        top2: $('.progress-top2'),
        right2: $('.progress-right2'),
        mid2: $('.progress-mid2'),
        left2: $('.progress-left2'),
        bottom2: $('.progress-bottom2'),
        windowHeight: $(window).height(),
        windowWidth: $(window).width(),
        scrollHeight: $(document).height() - $(window).height(),
        progressTotal: $(window).height() * 2 + $(window).width() * 2,
        scrollPosition: $(document).scrollTop()
      };
    },
    init: function init() {
      s = this.settings();
      this.bindEvents();
    },
    bindEvents: function bindEvents() {
      $(window).on('scroll', this.onScroll);
      $(window).on('resize', this.onResize);

      this.progress();
    },
    onScroll: function onScroll() {
      s.scrollPosition = $(document).scrollTop();
      ProgressScroll.requestTick();
    },
    onResize: function onResize() {
      s.windowHeight = $(window).height();
      s.windowWidth = $(window).width();
      s.scrollHeight = $(document).height() - s.windowHeight;
      s.progressTotal = s.windowHeight * 2 + s.windowWidth * 2;

      ProgressScroll.requestTick();
    },
    requestTick: function requestTick() {
      requestAnimationFrame(this.progress);
    },
    progress: function progress() {
      var percentage = s.scrollPosition / s.scrollHeight;
      var width = s.windowWidth / s.progressTotal;
      var height = s.windowHeight / s.progressTotal;

      s.top.css('width', percentage / width * 100 + '%');
      s.right.css('height', (percentage - width) / height * 100 + '%');
      s.top2.css('width', percentage / width * 100 + '%');
      s.right2.css('height', (percentage - width) / height * 100 + '%');
      s.mid.css('width', (percentage - width - height) / width  * 100 + '%');
      s.mid2.css('width', (percentage - width - height) / width  * 100 + '%');
      s.left.css('height', (percentage - width - height - width) / height * 125 + '%');
      s.left2.css('height', (percentage - width - height - width) / height * 125 + '%');
      s.bottom.css('width', (percentage - width - height - width) / width * 220 + '%');
      s.bottom2.css('width', (percentage - width - height - width) / width * 200 + '%');
    }
  };
}();

// Init
$(function () {
  ProgressScroll.init();
});

Извините что я вас так нагружаю.

[RAX7]

SerjAndreev, я не ванга чтобы покуску кода догадаться обо всем

[SerjAndreev]

RAX7,

onScroll: function onScroll() {
          s.scrollPosition = $(document).scrollTop();
          ProgressScroll.requestTick();
          var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
          var persent = parseInt(scrollPercentage * 100);
          var currentItemIndex = elementAtPersent(persent, mapItemsPersent);

          if (currentItemIndex !== -1) {
            mapItemsPersent[currentItemIndex].targetEl.classList.add('current');
            mapItemsPersent[currentItemIndex].targetEl.classList.remove('previous');

            for (var i = currentItemIndex - 1; i >= 0; i--) {
              mapItemsPersent[i].targetEl.classList.add('previous');
              mapItemsPersent[i].targetEl.classList.remove('current');
            }

            for (var _i = currentItemIndex + 1; _i < mapItemsPersent.length; _i++) {
              mapItemsPersent[_i].targetEl.classList.remove('current');
            }
          }

        },

Вот ваш код как в вашем примере залитом на jsfibble,
как возможно его реализовать до то того момента пока не встретиться класс active
тоесть как встретим класс active перестаем раздовать классы.