stackoom
  简体   繁体   中英

Moving vertical line on scroll

 原文  2019-12-14 18:54:43  2   2    javascript/ html/ css/ animation/ triggers

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... etc 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/

2 answers

solution1
 1 ACCPTED  2019-12-16 06:03:10

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

solution2
 0  2019-12-18 17:59:51

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question ChartJS - Moving vertical line is display on top of tooltip CSS / JS : Animate a vertical line on scroll vertical scrollbar moving bit by bit depending on how far you scroll Moving Element according to vertical Scroll - most performant way? Moving vertical scroll bar on keyboard navigation in custom div dropdown How to make vertical text scroll stop at each line How to change the height of a vertical line on the page as you scroll by it how to stop the element at footer line while moving it up and down with scroll Vertical scroll bar is moving top when I open light-box d3.js:vertical moving line's intersection point with line graph
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM