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/

score 1 · Accepted Answer · edited Dec 16 '19 at 07:53

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");
})

Yes, that's exactly what I wanted. But can I loop these lines? When they reach some value for top, after that they change direction on next scrolls. And when they reach again some value they change direction again. Now I can scroll them out of the screen — Aventadorrre, Dec 16 '19 at 06:44
yep! you should probably have a look into this post : you will probably have to see if they are being scrolled down or scrolled up (the mouse wheel) and do some if statements https://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event — paula, Dec 16 '19 at 22:29

score 0 · Answer 2 · answered Dec 18 '19 at 17:59

Here's updated @paula's solution to what I wanted to get: 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;
}

Moving vertical line on scroll

2 Answers2