如何在滚动条上进行“彩虹”边框移动

Question

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

codepen“开始编码”按钮由两个组件组成，给人以彩虹边框的印象。彩虹 div 和其中的黑色跨度。跨度比div小，给人彩虹边框的印象。

Answer 1

只有在滚动时才需要使用 javascript 来做某事。我可以向您展示如何使用 jquery。也许其他人可以用 vanilla js 做到这一点。

您应该将 css 动画帧添加到您的元素 (more info) 并将它们置于暂停状态 animation-play-state: paused;。然后在滚动时只需设置animation-play-state: running;，如果用户在短时间内没有滚动，则将其设置回animation-play-state: paused; 我们可以使用jquery 使用.scroll() 这样做，如下所示：

$(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 使用窗口进行滚动。

并包含在此 sn-p 使用容器进行滚动：

$(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 度角移动，以避免任何明显的接缝。