在滚动条上移动垂直线

时间：2019-12-14 18:54:43

标签： javascript html css animation triggers

我的网站上有竖线。这是演示：https://codepen.io/Aventadorrre/pen/GRgjyYO

HTML 

<div class="lines">
    <div class="lines-blue">
        <div id="line_0" class="line"></div>
        <div id="line_1" class="line"></div>
        <div id="line_2" class="line"></div>
        <div id="line_3" class="line"></div>
        <div id="line_4" class="line"></div>
        <div id="line_5" class="line"></div>
        <div id="line_6" class="line"></div>
    </div>
    <div class="line" id="line-0-white"></div>
    <div class="line" id="line-1-white"></div>
    <div class="line" id="line-2-white"></div>
    <div class="line" id="line-3-white"></div>
    <div class="line" id="line-4-white"></div>
    <div class="line" id="line-5-white"></div>
    <div class="line" id="line-6-white"></div>
</div>

SCSS 

body{
  background-color: #22222A;
  position: relative;
  min-height: 3000px;
  .line {
    position: relative;
    &:before {
      content: '';
      background-color: blue;
      position: fixed;
      width: 1px;
      height: 100%;
      min-height: 5vh;
      left: 0px;
      z-index: 0;
      animation: linemove 10s infinite;
    }
    &#line_0 {
      &:before {
        left: 6%;
        height: 20%;
        animation: linemove_1 10s infinite;
      }
    }
    &#line_1 {
      &:before {
        left: 16%;
        height: 20%;
        animation: linemove_1 10s infinite;
      }
    }
    &#line_2 {
      &:before {
        left: 32%;
        height: 14%;
        top: 40%;
        animation: linemove_2 10s infinite;
      }
    }
    &#line_3 {
      &:before {
        left: 48%;
        height: 13%;
        top: 24%;
        animation: linemove_3 10s infinite;
      }
    }
    &#line_4 {
      &:before {
        left: 64%;
        height: 14%;
        top: 36%;
        animation: linemove_4 10s infinite;
      }
    }
    &#line_5 {
      &:before {
        left: 80%;
        height: 22%;
        top: 60%;
        animation: linemove_5 10s infinite;
        z-index: 0;
      }
    }
    &#line_6 {
      &:before {
        left: 94%;
        height: 22%;
        top: 60%;
        animation: linemove_5 10s infinite;
        z-index: 0;
      }
    }
    &#line-0-white {
      &:before {
        left: 6%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-1-white {
      &:before {
        left: 16%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-2-white {
      &:before {
        left: 32%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-3-white {
      &:before {
        left: 48%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-4-white {
      &:before {
        left: 64%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-5-white {
      &:before {
        left: 80%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
    &#line-6-white {
      &:before {
        left: 94%;
        height: 100%;
        background-color: #282830;
        z-index: -1;
      }
    }
  }
}
@keyframes linemove_1 {
  0%   {top: 20%;}
  50% {top: 30%;}
  100% {top: 20%;}
}
@keyframes linemove_2 {
  0%   {top: 40%;}
  50% {top: 60%;}
  100% {top: 40%;}
}
@keyframes linemove_3 {
  0%   {top: 24%;}
  50% {top: 55%;}
  100% {top: 24%;}
}
@keyframes linemove_4 {
  0%   {top: 36%;}
  50% {top: 49%;}
  100% {top: 36%;}
}
@keyframes linemove_5 {
  0%   {top: 60%;}
  50% {top: 80%;}
  100% {top: 60%;}
}

当前，它们一直在按CSS中的关键帧移动，但这并不是我想要的。我希望它们静止并在滚动后移动一些距离。例如：它们是静态的->滚动->左起第一行上升100px，左起第二行下降80px，第三行... e.t.c.我想为每个距离定义这些距离，或者可以完全随机化，但是要在我指定的范围内。

我想我必须使用JS，但我仍在学习此

以下是我要执行的示例：https://crafton.eu/portfolio/ergo-hestia/

2 个答案:

答案 0 :(得分：1)

不确定是不是您要找的东西？我附上了小提琴link。

HTML：

<div class="lines">
    <div class="lines-blue">
        <div id="line_0" class="line"></div>
        <div id="line_1" class="line"></div>
        <div id="line_2" style="top:300px" class="line"></div>
        <div id="line_3" style="top:350px" class="line"></div>
        <div id="line_4" style="top:100px" class="line"></div>
        <div id="line_5" style="top:400px" class="line"></div>
        <div id="line_6" style="top:290px" class="line"></div>
    </div>
    <div class="line" id="line-0-white"></div>
    <div class="line" id="line-1-white"></div>
    <div class="line" id="line-2-white"></div>
    <div class="line" id="line-3-white"></div>
    <div class="line" id="line-4-white"></div>
    <div class="line" id="line-5-white"></div>
    <div class="line" id="line-6-white"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.js"></script>

CSS：

body {
  background-color: #22222a;
  position: relative;
  min-height: 3000px;
}

.lines-blue {
  position: relative;
}

.line {
  position: absolute;
}

.line:before {
  content: '';
  background-color: blue;
  position: fixed;
  width: 1px;
  height: 100%;
  min-height: 5vh;
  left: 0px;
  z-index: 0;
}

.line#line_0:before {
  left: 6%;
  height: 20%;
}

.line#line_1:before {
  left: 16%;
  height: 20%;
}

.line#line_2:before {
  left: 32%;
  height: 14%;
}

.line#line_3:before {
  left: 48%;
  height: 13%;
}

.line#line_4:before {
  left: 64%;
  height: 14%;
}

.line#line_5:before {
  left: 80%;
  height: 22%;
  z-index: 0;
}

.line#line_6:before {
  left: 94%;
  height: 22%;
  z-index: 0;
}

.line#line-0-white:before {
  left: 6%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-1-white:before {
  left: 16%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-2-white:before {
  left: 32%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-3-white:before {
  left: 48%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-4-white:before {
  left: 64%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-5-white:before {
  left: 80%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

.line#line-6-white:before {
  left: 94%;
  height: 100%;
  background-color: #282830;
  z-index: -1;
}

JS：

$(window).on('scroll', function() {
    var line3top = $("#line_3").offset().top;
    console.log(line3top);

    $("#line_0").css('top', "+=" + 10);
    $("#line_1").css('top', "+=" + 5);
    $("#line_2").css('top', "-=" + 3 + "px");
    $("#line_3").css('top', "+=" + 3 + "px");
    $("#line_4").css('top', "-=" + 10 + "px");
    $("#line_5").css('top', "+=" + 4 + "px");
    $("#line_6").css('top', "+=" + 15 + "px");
})

答案 1 :(得分：0)

这里更新了@paula针对我想要获得的解决方案：https://jsfiddle.net/qasgz4w9/ 

<div class="lines">
    <div class="lines-blue">
        <div id="line_0" class="line" style="top:550px"></div>
        <div id="line_1" class="line" style="top:70px"></div>
        <div id="line_2" class="line" style="top:20px"></div>
        <div id="line_3" class="line" style="top:390px"></div>
        <div id="line_4" class="line" style="top:55px"></div>
        <div id="line_5" class="line" style="top:90px"></div>
        <div id="line_6" class="line" style="top:700px"></div>
    </div>
    <div class="line" id="line-0-white"></div>
    <div class="line" id="line-1-white"></div>
    <div class="line" id="line-2-white"></div>
    <div class="line" id="line-3-white"></div>
    <div class="line" id="line-4-white"></div>
    <div class="line" id="line-5-white"></div>
    <div class="line" id="line-6-white"></div>
</div>

var position = $(window).scrollTop(); 
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) { // w dół
      $("#line_0").css('top', "-=" + 6 + "px");
      $("#line_1").css('top', "+=" + 8 + "px");
      $("#line_2").css('top', "+=" + 3 + "px");
      $("#line_3").css('top', "-=" + 3 + "px");
      $("#line_4").css('top', "+=" + 10 + "px");
      $("#line_5").css('top', "+=" + 4 + "px");
      $("#line_6").css('top', "-=" + 9 + "px");
    } else { //w górę
      $("#line_0").css('top', "+=" + 6 + "px");
      $("#line_1").css('top', "-=" + 8 + "px");
      $("#line_2").css('top', "-=" + 3 + "px");
      $("#line_3").css('top', "+=" + 3 + "px");
      $("#line_4").css('top', "-=" + 10 + "px");
      $("#line_5").css('top', "-=" + 4 + "px");
      $("#line_6").css('top', "+=" + 9 + "px");
    }
    position = scroll;
    setTimeout(scroll, 1000);
});

body {
    background-color: #22222a;
    position: relative;
    min-height: 3000px;
}
.lines-blue {
    position: relative;
}
.line {
    position: absolute;
}
.line:before {
    content: '';
    background-color: blue;
    position: fixed;
    width: 1px;
    height: 100%;
    min-height: 5vh;
    left: 0px;
    z-index: 0;
}
.line#line_0:before {
    left: 6%;
    height: 20%;


}
.line#line_1:before {
    left: 16%;
    height: 20%;

}
.line#line_2:before {
    left: 32%;
    height: 14%;

}
.line#line_3:before {
    left: 48%;
    height: 13%;

}
.line#line_4:before {
    left: 64%;
    height: 14%;

}
.line#line_5:before {
    left: 80%;
    height: 22%;
    z-index: 0;
}
.line#line_6:before {
    left: 94%;
    height: 22%;
    z-index: 0;
}
.line#line-0-white:before {
    left: 6%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-1-white:before {
    left: 16%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-2-white:before {
    left: 32%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-3-white:before {
    left: 48%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-4-white:before {
    left: 64%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-5-white:before {
    left: 80%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
.line#line-6-white:before {
    left: 94%;
    height: 100%;
    background-color: #282830;
    z-index: -1;
}
相关问题
最新问题