Как создать эффект параллакса с помощью Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

// создаем объект Canvas и устанавливаем его размеры
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

// создаем контекст Canvas
var ctx = canvas.getContext('2d');

// загружаем изображения
var background = new Image();
background.src = 'background.png';

var foreground = new Image();
foreground.src = 'foreground.png';

// устанавливаем коэффициенты скорости для заднего и переднего плана
var backgroundSpeed = 1;
var foregroundSpeed = 3;

var backgroundX = 0;
var foregroundX = 0;

// функция, которая будет вызываться для отрисовки каждого кадра
function draw() {
  // очищаем Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // рисуем задний фон
  ctx.drawImage(background, backgroundX, 0);

  // рисуем передний план
  ctx.drawImage(foreground, foregroundX, 0);

  // вычисляем новые координаты для заднего и переднего плана
  backgroundX -= backgroundSpeed;
  foregroundX -= foregroundSpeed;

  // если объекты вышли за пределы экрана - перемести их в начало
  if (backgroundX < -background.width) {
    backgroundX = 0;
  }

  if (foregroundX < -foreground.width) {
    foregroundX = 0;
  }

  // запускаем новую анимацию
  requestAnimationFrame(draw);
}

// запускаем первую анимацию
draw();