分享一个新鲜代码，用 Javascript 和 CSS3 来增加页面滚动的效果

[dyniao]

先上示例动图

熟肉核心代码

scroll(function(direction) {
if (direction == "up") {
jQuery(".scrollcircle").addClass("scroll_up");
} else {
jQuery(".scrollcircle").addClass("scroll_down");
}
});
var cssend = document.querySelector(".scrollcircle");
cssend.addEventListener("webkitAnimationEnd", function() {
jQuery(".scrollcircle").removeClass("scroll_up").removeClass("scroll_down");
}, false);
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop, fn = fn || function() {
};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop, delta = afterScrollTop - beforeScrollTop;
if (delta === 0) {
return false;
}
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
};

全部代码详见

http://www.dyniao.com/use-javascript-and-css3-add-scroll-effect/

[chemzqm]

老实说，看着有点累，用户浏览网页通常是为了浏览内容，被特效干扰体验不友好

[kirainmoe]

mark

[zhe13]

求无 JQuery 版本

[oott123]

成品代码为啥不给一个页面让用户体验一下……
说实话看动图我完全没看懂这是个啥。

[oott123]

@oott123 好吧，没注意楼主网站上就有一个。因为我用的 Firefox 所以这玩意儿并不会动，而且屏幕稍微大一旦就根本留意不到……

[50vip]

代码不错，完全可以改成没有 jq 的~

[bk201]

如果能让左下原盘可以手动滚动，使得滚动条滚动就是一个不错的轮子了。

[botao1]

这存在的意义是什么？

[flowfire]

跳帧现象。。。

[Balthild]

手机上巨卡

[dyniao]

@Balthild 应该是硬件渲染 css3 慢导致的吧。具体原因不是很明白。

[dyniao]

@50vip
@zhe13
已经无 jq 了

[50vip]

@dyniao github 地址呢？大小有多大啊？需要我我给你提供 cdn 地址不~