Cli*_*lla 5 html javascript jquery css3 translate3d
我们正在使用最少的js和CSS转换3d属性构建平滑的滚动库。我们为此有一个基础(作为附加笔),但是随着我们增加图像和文本内容的数量,动画会开始抖动,有时甚至在滚动时会跳动。我们不确定是否要使用最佳方法来实现这一目标。请检查附带的笔。
$(function () {
$('.wrapper').height($('.smooth').height());
var scrollTimer = null;
$(window).scroll(function () {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(requestAnimationFrameTog, 5)
});
$(window).resize(function () {
$('.wrapper').height($('.smooth').height());
});
});
function requestAnimationFrameTog() {
scrollTimer = null;
window.requestAnimationFrame(scrollerize);
}
function scrollerize() {
var scroll = window.pageYOffset;
$(".smooth").css({
transform: 'translate3d(0px, -' + scroll + 'px, 0px)'
});
}
Run Code Online (Sandbox Code Playgroud)
谢谢 :)
| 归档时间: |
|
| 查看次数: |
6138 次 |
| 最近记录: |