Как сделать диагональный scroll?

Question

[kamisarlapsha]

Привет! Как можно сделать диагональный скролл картинки в блоке. То есть чтобы она прокручивалась не при прокрутке страницы, а именно когда человек тащит ее или свайпает.

Что-то вроде этого.


Думал можно сделать на jquery
К примеру высчитывать координаты x y и одновременно их обновлять. Но как можно сделать чтобы она прокручивалась как описал выше ? Или может через библиотеку какую нибудь делать, по типу scrollMagick ?

Comments

[Mesuti]

На JavaScript добавляете картинке отступы на количество прокрутки.
Одинаковые отступы для X и Y, тогда картинка уедет по диагонали

Answer 1

[Дмитрий Беляев]

так?

Comments

[kamisarlapsha]

А как использовать с touch эвентами ?

Так значение не определяются

document.addEventListener('touchmove', e => {
  if(!run) return;
  const [dx, dy] = [e.targetTouches[0].clientX - startX, e.targetTouches[0].clientY - startY];
  [startX, startY] = [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
  lastTranslate += Math.round((dx + dy) / 2);
  img.style.transform = `translate(-${lastTranslate + 150}px,${lastTranslate - 150}px)`;
  console.log(dx, dy, img.style.transform);
});