这里是代码,当灰色线条从左往右移动时,我需要将它们与圆形连接起来。有没有办法计算距离,以便我可以连接灰色线条和圆形?
$(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>