如何在滚动中进行“彩虹”边框的移动

Question

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

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

Answer 1

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

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

.scroll()

此处的工作示例（包括html和CSS）：

$(document).ready(function(){

        //animate when scrolling
        //when window scrolls
    $( window ).scroll(function() {
            //change play state to running
        $( '.scrollcolors' ).css( 'animation-play-state', 'running' );
        //when window stops scrolling
        $(window).scroll(function() {
            clearTimeout($.data(this, 'scrollTimer'));
                $.data(this, 'scrollTimer', setTimeout(function() {
                    //set play state to paused
                  $( '.scrollcolors' ).css( 'animation-play-state', 'paused' );
            //time without scrolling
            }, 500));
        });
    });

});

并包含在此代码段中：

jsfiddle

$(document).ready(function(){

		//animate when scrolling
		//when window scrolls
    $( window ).scroll(function() {
    		//change play state to running
        $( '.scrollcolors' ).css( 'animation-play-state', 'running' );
        //when window stops scrolling
        $(window).scroll(function() {
            clearTimeout($.data(this, 'scrollTimer'));
                $.data(this, 'scrollTimer', setTimeout(function() {
                	//set play state to paused
                  $( '.scrollcolors' ).css( 'animation-play-state', 'paused' );
            //time without scrolling
            }, 500));
        });
    });
    
});

.container {
  width: 100%;
  height: 100%;
}
.content {
  position: relative;
  height: 720px;
}
.scrollcolors span {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border-radius: 3px;
  background-color: black;
  color: white;
  text-align: center;
  padding: .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(-36deg, #cf2525, #e0c71b 1rem, #0caa0d 2rem, #234ac1 3rem, #7e1cc2 4rem, #cf2525 5rem);
  background-position: 0% 0%;
  background-size: 200% 200%;
  background-repeat: repeat;
  animation-name: colors;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: paused;
  animation-timing-function: linear;
}

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