сделать холст изображения прокрутки - PullRequest
Новая
       11

сделать холст изображения прокрутки

0 голосов
/ 15 января 2019

У меня есть холст в качестве фиксированного элемента на заднем плане на моем сайте портфолио. Холст в целом фиксируется. Я просто хочу, чтобы один элемент холста изображения действительно прокручивался. Я попытался сделать это вручную с его значением у. Вот что я получил. 

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 или мобильных браузерах.

...