在滚动条上移动垂直线

问题描述 投票:3回答:1

我的网站上有竖线。演示: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/

javascript html css animation triggers
1个回答
1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.