Question

我在投资组合网站的背景中有一个画布作为固定元素。画布整体是固定的。我只希望一个图像画布元素实际滚动。我尝试使用y值手动进行操作。这就是我得到的。

var scrollTop  = window.pageYOffset||document.documentElement.scrollTop;

window.addEventListener('scroll', function(){
    scrollTop  = window.pageYOffset||document.documentElement.scrollTop;
});

然后是图像的类

function Element(img, x, originalY, w, h, z){
   this.img = img;
   this.x = x;
   this.originalY = canvas.height-this.h-originalY; //so it's relative to the bottom of the screen
   this.w = w;
   this.h = h;
   this.z = z;
}
Element.prototype.update = function(){
    this.y = this.originalY-scrollTop*this.z;
}
Element.prototype.draw = function(){
   ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
}

var mountain = new Element('url',0,0,1000,300,1);

循环

var loop = function(){
    mountain.update();
    mountain.draw();
    window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);

这是可行的，除了有点落后，尤其是在Firefox和Safari中。滚动之间肯定有一个延迟，而画布图像实际上追赶到滚动所在的位置。有什么想法吗？

这是问题的实时版本。在我的网站magdi-hazaa.com中这是前面的三个山脉。在chrome中可以正常工作，但在Firefox或移动浏览器中效果不佳。

滚动画布图像

0 个答案: