如何在滚动条上移动 'rainbow' 边框

Question

我正在尝试重新创建类似于桌面上 https://codepen.io/ 'Start Coding' 按钮的悬停状态的效果（移动的彩虹边框），但是我希望在滚动期间发生移动然后在用户停止滚动时停止。

codepen 'Start Coding' 按钮由两个组件组成，给人以彩虹边框的印象。彩虹 div 和其中的黑色跨度。跨度小于 div，给人以彩虹边框的印象。

Answer 1

您必须使用 javascript 才能仅在滚动时执行某些操作。我可以用 jquery 告诉你怎么做。也许其他人可以用 vanilla js 做到这一点。

You should add css animation frames to your element (more info) and put them in a paused state animation-play-state: paused;. Then on scroll just set the animation-play-state: running; and if the user doesn't scroll for a brief period, then set it back to animation-play-state: paused; We can do so with jquery using .scroll(), like this:

$(document).ready(function(){

    //animation plays only when window scrolls
    //1 catch window scrolling
    $( window ).scroll(function() {
        //2 change play state to running
        $( '.scrollcolors' ).css( 'animation-play-state', 'running' );
        //3 when window stops scrolling
        $(window).scroll(function() {
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function() {
                //4 set play state back to paused
                $( '.scrollcolors' ).css( 'animation-play-state', 'paused' );
            //5 set time without scrolling
            }, 500));
        });
    });

});

这里的工作示例（包括html和css）：jsfiddle
jsfiddle 使用 window 进行滚动。

并包含在此代码段中使用容器进行滚动：

$(document).ready(function(){

    //animation plays only when window scrolls
    //1 catch window scrolling
    $('.container').scroll(function() {
        //2 change play state to running
        $( '.scrollcolors' ).css( 'animation-play-state', 'running' );
        //3 when window stops scrolling
        $('.container').scroll(function() {
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function() {
                //4 set play state to paused
                $( '.scrollcolors' ).css( 'animation-play-state', 'paused' );
            //5 set time without scrolling
            }, 500));
        });
    });
    
});

.container {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}
.content {
  position: relative;
  height: 600px;
}
.scrollcolors span {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border-radius: 3px;
  background-color: black;
  color: white;
  text-align: center;
  padding: 0.6em;
}
.sc1{
  top: 20px;
}
.sc2{
  top: 170px;
}
.sc3{
  top: 320px;
}
.scrollcolors {
  position: absolute;
  width: 200px;
  height: 50px;
  margin: 10px;
  border-radius: 6px;
  background-color: yellow;
  background-image: repeating-linear-gradient(-45deg, #cf2525, #e0c71b 1rem, #0caa0d 2rem, #234ac1 3rem, #7e1cc2 4rem, #cf2525 5rem);
  background-position: 0% 0%;
  background-size: 1000%;
  background-repeat: repeat;
  animation-name: colors;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: paused;
  animation-timing-function: linear;
}

@keyframes colors {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 18.9% 18.9%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <div class="scrollcolors sc1">
    <span>scroll to animate</span>
    </div>
    <div class="scrollcolors sc2">
    <span>scroll to animate</span>
    </div>
    <div class="scrollcolors sc3">
    <span>scroll to animate</span>
    </div>
  </div>
</div>

备注：

我没有精确复制codepen的渐变颜色，我只是做了一个快速的通用彩虹渐变。
可能有更好的方法来设置无缝重复的动画渐变。我将背景大小设置为 1000%，并将位置设置为动画，使其以与渐变相同的 45 度角移动，以避免任何明显的接缝。

如何在滚动条上移动 'rainbow' 边框

How to make 'rainbow' border movement on scroll

css

scroll

border

background-image

linear-gradients