Moving vertical line on scroll

Question

I have vertical lines on my website. Here's demo: 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%;}
}

Currently, they are moving all the time, by keyframes in CSS but it's not that what I want. I want them static and move some distance after scroll. For example: they are static -> scroll -> first line from left goes up by 100px, second line from left goes down by 80px, third goes... e.t.c. And i want to define these distances for each of them or that can be totally randomize but in the range in which I specify.

I guess I'll have to use JS, but i'm still learning this

Here's the example what i want to do: https://crafton.eu/portfolio/ergo-hestia/

Answer 1

Not sure if that's what you are kinda looking for? I attached the fiddle 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");
})