用圆形连接灰色线条

Question

这里是代码，当灰色线条从左往右移动时，我需要将它们与圆形连接起来。有没有办法计算距离，以便我可以连接灰色线条和圆形？

$(window).scroll(function() {
  st = $(window).scrollTop();

  ///////////////////////////     Circle animations   ////////////////////////////
  var circleOne = $("#step1").offset().top;

  if (st > circleOne - 400) {
    $("#step1").find(".box-circle").addClass("moveMe");
    $("#step1").addClass("step-moving");
  }

  var circleTwo = $("#step2").offset().top;

  if (st > circleTwo - 300) {
    $("#step2").find(".box-circle").addClass("moveMeRight");
    $("#step2").addClass("step-moving2");
  }

  var circleThree = $("#step3").offset().top;

  if (st > circleThree - 300) {
    $("#step3").find(".box-circle").addClass("moveMeLeft");
    $("#step3").addClass("step-moving3");
  }

  var circleThree = $("#step4").offset().top;

  if (st > circleThree - 300) {
    $("#step4").find(".box-circle").addClass("moveMeRight1");
    $("#step4").addClass("step-moving4");
  }
});

#how-we-work {
  overflow: hidden;
}
.work-holder {
  padding: 80px 0;
}
.work-holder:after {
  display: block;
  content: " ";
  clear: both;
}
.step {
  margin: 0 0 120px;
}
.step:after {
  display: block;
  content: " ";
  clear: both;
}
.box-circle:after {
  position: absolute;
  width: 5px;
  height: 120px;
  background: #d3d6d9;
  content: " ";
  bottom: -120px;
  left: 50%;
}
.box-circle.box-circle01:after {
  display: none;
}
.box-circle {
  width: 200px;
  height: 200px;
  background: #2f303a;
  position: relative;
  left: 300px;
  border-radius: 100%;
  padding: 20px 20px 0;
  float: left;
}
.box-circle.moveMe {
  left: 100px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  background: #00b7e9;
}
.box-circle.moveMe:after {
  ms-transform: rotate(-45deg);
  /* IE 9 */
  -webkit-transform: rotate(-45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
  left: 96%;
  bottom: -164px;
  height: 195px;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
  transition: all 1.3s;
}
.step-number {
  float: left;
  font-size: 76px;
  color: #fff;
  font-weight: 700;
}
.step-icon {
  float: right;
  width: 60px;
  height: 60px;
  margin: 30px 30px 0 0;
}
.call {
  background: url("../images/ico-call.svg") no-repeat;
  background-size: 100% 100%;
}
.started {
  background: url("../images/ico-get-s.svg") no-repeat;
  background-size: 100% 100%;
}
.project {
  background: url("../images/ico-project.svg") no-repeat;
  background-size: 100% 100%;
}
.project-done {
  background: url("../images/ico-done.svg") no-repeat;
  background-size: 100% 100%;
}
.para-step {
  font-size: 14px;
  color: #fff;
}
.para-holder {
  float: left;
  position: relative;
  left: 350px;
  max-width: 390px;
  text-align: center;
}
.box-circle.moveMe .step-number {
  margin: 0 0 0 -80px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  color: #00b7e9;
  font-size: 130px;
  position: relative;
  top: 15px;
}
.box-circle.moveMe .step-icon {
  margin: 0 -94px 0 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  width: 80px;
  height: 80px;
  top: -24px;
  position: relative;
}
.box-circle.moveMe .detail {
  text-align: center;
  top: -141px;
}
.box-circle.moveMe .step-icon.call {
  background: url("../images/ico-call-hover.svg") no-repeat;
  background-size: 100% 100%;
}
.step-moving .para-holder .para-step {
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -ms-transition: 1s all;
  -o-transition: 1s all;
  transition: 1s all;
  color: #233341;
}
.circle-top:after {
  display: block;
  clear: both;
  content: " ";
}
.detail {
  overflow: hidden;
  color: #fff;
  position: relative;
  top: -20px;
  padding: 0 0 0 10px;
  font-size: 20px;
}
.detail span {
  display: block;
}
.detail strong {
  font-size: 900;
}
.box-circle.moveMeRight {
  left: 700px;
  -webkit-transition: 1.3s all;
  -moz-transition: 1.3s all;
  -ms-transition: 1.3s all;
  -o-transition: 1.3s all;
  background: #00b7e9;
}
.box-circle.moveMeRight .step-number {
  margin: 0 0 0 -95px;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
  color: #00b7e9;
  font-size: 130px;
  position: relative;
  top: 25px;
}
.box-circle.moveMeRight .step-icon {
  margin: 0 -104px 0 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  width: 80px;
  height: 80px;
  position: relative;
  top: -34px;
}
.box-circle.moveMeRight .started {
  background: url("../images/ico-get-s-hover.svg") no-repeat;
  background-size: 100% 100%;
}
.box-circle.moveMeRight .detail {
  text-align: center;
  top: -130px;
}
.step-moving2 .para-holder {
  left: 0;
  top: 50px;
}
.step-moving2 .para-holder .para-step {
  color: #233341;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
}
.box-circle.moveMeLeft {
  left: 100px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  background: #00b7e9;
}
.box-circle.moveMeLeft .detail {
  text-align: center;
  top: -141px;
}
.box-circle.moveMeLeft .step-icon.project {
  background: url("../images/ico-project-hover.svg") no-repeat;
  background-size: 100% 100%;
}
.step-moving3 .para-holder .para-step {
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -ms-transition: 1s all;
  -o-transition: 1s all;
  transition: 1s all;
  color: #233341;
}
.box-circle.moveMeLeft .step-icon {
  margin: 0 -100px 0 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  width: 80px;
  height: 90px;
  top: -24px;
  position: relative;
}
.box-circle.moveMeLeft .step-number {
  margin: 0 0 0 -95px;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
  color: #00b7e9;
  font-size: 130px;
  position: relative;
  top: 15px;
}
.box-circle.moveMeRight1 {
  left: 700px;
  -webkit-transition: 1.3s all;
  -moz-transition: 1.3s all;
  -ms-transition: 1.3s all;
  -o-transition: 1.3s all;
  background: #00b7e9;
}
.box-circle.moveMeRight1 .step-number {
  margin: 0 0 0 -95px;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
  color: #00b7e9;
  font-size: 130px;
  position: relative;
  top: 25px;
}
.box-circle.moveMeRight1 .step-icon {
  margin: 0 -104px 0 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  width: 80px;
  height: 80px;
  position: relative;
  top: -34px;
}
.box-circle.moveMeRight1 .project-done {
  background: url("../images/ico-done-hover.svg") no-repeat;
  background-size: 100% 100%;
}
.box-circle.moveMeRight1 .detail {
  text-align: center;
  top: -130px;
}
.step-moving4 .para-holder {
  left: 0;
  top: 50px;
}
.step-moving4 .para-holder .para-step {
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -ms-transition: 1s all;
  -o-transition: 1s all;
  transition: 1s all;
  color: #233341;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="how-we-work">
  <div class="container">
    <span class="title-one">We Don’t Work</span>
    <h1 class="about-heading">WE LOVE IT</h1>
    <section class="work-holder">
      <div id="step1" class="step">
        <div class="box-circle">
          <div class="circle-top">
            <span class="step-number">1</span>
            <span class="step-icon call"></span>
          </div>
          <div class="detail">
            <span>Call To</span>
            <strong>Our Manager</strong>
          </div>
        </div>
        <div class="para-holder">
          <p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
        </div>
      </div>
      <div id="step2" class="step">
        <div class="box-circle">
          <div class="circle-top">
            <span class="step-number">2</span>
            <span class="step-icon started"></span>
          </div>
          <div class="detail">
            <span>We Get</span>
            <strong>You Started</strong>
          </div>
        </div>
        <div class="para-holder">
          <p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
        </div>
      </div>
      <div id="step3" class="step">
        <div class="box-circle">
          <div class="circle-top">
            <span class="step-number">3</span>
            <span class="step-icon project"></span>
          </div>
          <div class="detail">
            <span>We Start</span>
            <strong>Your Project</strong>
          </div>
        </div>
        <div class="para-holder">
          <p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
        </div>
      </div>
      <div id="step4" class="step">
        <div class="box-circle box-circle01">
          <div class="circle-top">
            <span class="step-number">4</span>
            <span class="step-icon project-done"></span>
          </div>
          <div class="detail">
            <span>You Get Your </span>
            <strong>Project Done</strong>
          </div>
        </div>
        <div class="para-holder">
          <p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
        </div>
      </div>
    </section>
  </div>
</section>

- Shaban Khan

---

我会使用SVG来实现这个。 - David Fregoli

Answer 1

免责声明：目前无法发表评论。

这个链接或许可以帮到你。获取坐标，使用勾股定理计算距离，绘制相应长度的灰色线条。

- Uku Tammet