用 Javascript 和 CSS3 来增加页面滚动的效果

整理代码看到里边还有一个 CSS3 写的彩虹圆圈。觉得要是让彩虹圆圈转动起来放到页面里边当个 loading 效果也不错。
当做起来的之后，突然觉得弄个跟随滚动条的效果更不错。
开始动手写。

如果想直接看成品代码的请直接看最后边第六步。

1、首先获取滚动条的滚动状态，来获取是向上滚动还是向下滚动，JS 代码

scroll(function(direction) {
console.log(direction);
});
function scroll(fn) {
    var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,fn = fn || function() {};
    window.addEventListener("scroll", function() {var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop, delta = afterScrollTop - beforeScrollTop;if( delta === 0 ) return false;fn( delta > 0 ? "down" : "up" );beforeScrollTop = afterScrollTop;
    }, false);
}

可以提示向上和向下的状态。

2、之后添加一个彩虹 CSS 的圆圈

<div id="scrolleffect"><div id="scrollcircle"></div></div>

CSS样式

#scrolleffect{position:fixed;left:30px;bottom:30px;width:50px;height:50px;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.5);}
#scrollcircle{width:100%;height:100%;border-radius:50%;background-size:50% 50%;background-position:left top,left top,left top,right top,right top,right top,right bottom,right bottom,right bottom,left bottom,left bottom,left bottom;background-repeat:no-repeat;box-shadow:inset 0 0 3px 1px rgba(0,0,0,.3);background-image:-moz-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),-moz-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),-moz-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),-moz-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),-moz-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),-moz-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),-moz-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),-moz-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),-moz-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),-moz-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),-moz-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ),-moz-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% );background-image:-webkit-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),-webkit-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),-webkit-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),-webkit-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),-webkit-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),-webkit-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),-webkit-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),-webkit-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),-webkit-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),-webkit-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),-webkit-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ),-webkit-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% );animation-iteration-count:1;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;}

3、添加CSS圆圈的动画效果，一个是用于向下滚动的时候正时针转，一个用于向上滚动的时候逆时针转。

.scroll_up{animation:scroll-up 0.5s linear;-webkit-animation:scroll-up 0.5s linear;-moz-animation:scroll-up 0.5s linear;}
.scroll_down{animation:scroll-down 0.5s linear;-webkit-animation:scroll-down 0.5s linear;-moz-animation:scroll-down 0.5s linear;}
@keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@-webkit-keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@-moz-keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}
@-webkit-keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}
@-moz-keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}

4、然后在js判断向上向下添加相关代码

function g(e){return document.getElementById(e);}
scroll(function(direction) {
    if(direction=='up')
    {
            g("scrollcircle").className+='scroll_up ';
    }
    else
    {
            g("scrollcircle").className+='scroll_down ';  
    }
});

这样就可以实现基本的功能了，但是当你滚动上下切换或者滚动快的时候，会有跳动的感觉。所以有了第5步。

5、js 判断 css3 动画是否完成?

var anim = g("scrollcircle");
anim.addEventListener(\'animationend\', function(){anim.className="";}, false);

当css动画结束之后，移除滚动样式，并在下次重新绑定。这样切换起来就流畅了。

6、成品JS代码

function g(e){return document.getElementById(e);}
scroll(function(direction) {
    if(direction=='up')
    {
            g("scrollcircle").className+='scroll_up ';
    }
    else
    {
            g("scrollcircle").className+='scroll_down ';  
    }
});
var anim = g("scrollcircle");
anim.addEventListener('animationend', function(){anim.className="";}, false);
function scroll(fn) {
    var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,fn = fn || function() {};
    window.addEventListener("scroll", function() {var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop, delta = afterScrollTop - beforeScrollTop;if( delta === 0 ) return false;fn( delta > 0 ? "down" : "up" );beforeScrollTop = afterScrollTop;
    }, false);
}

成品代码

<div id="scrolleffect"><div id="scrollcircle"></div></div>
<ol><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li><li>dyniao.com The quick brown fox jumps over the lazy dog</li></ol>
<script type="text/javascript">
function g(a){return document.getElementById(a)}scroll(function(a){"up"==a?g("scrollcircle").className+="scroll_up ":g("scrollcircle").className+="scroll_down "});var anim=g("scrollcircle");anim.addEventListener("animationend",function(){anim.className=""},!1);
function scroll(a){var b=document.documentElement.scrollTop||document.body.scrollTop;a=a||function(){};window.addEventListener("scroll",function(){var c=document.documentElement.scrollTop||document.body.scrollTop,d=c-b;if(0===d)return!1;a(0<d?"down":"up");b=c},!1)};
</script>
<style>
#scrolleffect{position:fixed;left:30px;bottom:30px;width:50px;height:50px;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.5);}
#scrollcircle{width:100%;height:100%;border-radius:50%;background-size:50% 50%;background-position:left top,left top,left top,right top,right top,right top,right bottom,right bottom,right bottom,left bottom,left bottom,left bottom;background-repeat:no-repeat;box-shadow:inset 0 0 3px 1px rgba(0,0,0,.3);background-image:-moz-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),-moz-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),-moz-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),-moz-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),-moz-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),-moz-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),-moz-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),-moz-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),-moz-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),-moz-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),-moz-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ),-moz-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% );background-image:-webkit-linear-gradient(60deg, #ff0000 36%,rgba(255,0,0,0) 36% ),-webkit-linear-gradient(30deg, #ff8000 64%,rgba(255,128,0,0) 64% ),-webkit-linear-gradient(0deg, #ffff00 100%,rgba(255,255,0,0) 100% ),-webkit-linear-gradient(-30deg, #80ff00 36%,rgba(128,255,0,0) 36%),-webkit-linear-gradient(-60deg, #00ff80 64%,rgba(0,255,128,0) 64% ),-webkit-linear-gradient(0deg, #00ffff 100%,rgba(0,255,255,0) 100% ),-webkit-linear-gradient(-120deg, #3097ff 36%,rgba(48,151,255,0) 36%),-webkit-linear-gradient(-150deg, #3071ff 64%,rgba(48,113,255,0) 64% ),-webkit-linear-gradient(0deg, #3e30ff 100%,rgba(62,48,128,0) 100% ),-webkit-linear-gradient(150deg, #5f3b9d 36%,rgba(95,59,157,0) 36% ),-webkit-linear-gradient(120deg, #803198 64%,rgba(128,49,152,0) 64% ),-webkit-linear-gradient(0deg, #ff0080 100%,rgba(255,0,128,0) 100% );animation-iteration-count:1;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;}
.scroll_up{animation:scroll-up 0.5s linear;-webkit-animation:scroll-up 0.5s linear;-moz-animation:scroll-up 0.5s linear;}
.scroll_down{animation:scroll-down 0.5s linear;-webkit-animation:scroll-down 0.5s linear;-moz-animation:scroll-down 0.5s linear;}
@keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@-webkit-keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@-moz-keyframes scroll-up{0%{ transform:rotate(0);}100%{transform:rotate(-360deg);}}
@keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}
@-webkit-keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}
@-moz-keyframes scroll-down{0%{ transform:rotate(0);}100%{transform:rotate(360deg);}}
</style>

2016-12-18更新：
移除 jQuery 代码；
适配 Chrome、Firefox、Edge；
加快滚动速度，半秒转一圈 animation:scroll-down 0.5s linear;。