Как сделать перемещение по странице с помощью свайпов?

Как сделать перемещение по странице с помощью свайпов?
Вот пример:http://robinmastromarino.com/project/fanny-myard

Я не составил целой картины. Что понял, что похоже на кучу кастомного кода. Большая часть страницы рендерится в canvas web-gl-ем. Думаю что задачу можно решить через хитрые манипуляции позицией элементов и перехватом событий свайпинга (это и touchmove и touchstart и иже с ними)

Спасибо за полезный совет. Но не легче touchmove и touchstart отслеживать скролл и при каждом новом свайпе сколиты вверх или вниз например на 500px?

Так можно сделать и будет работать. Но последствие в том что ощущение будет не полным если нельзя будет двигать страницу, передвигая палец после старта движения. Конечное решение зависит от комбинации факторов что примет заказчик, что ты можешь/успеешь сделать.

Еще куча нюансов может вылезти: типа snapping-point - после какого движения считать что нужно скроллить вперед, а когда считать что скроллить не нужно. Эти нюансы я бы выписал, пользуясь уже готовой реализацией.

Ок, спасибо

Здесь есть одна проблема. Событие срабатывает только на телефонах.

Да, touch события нужно дублировать как mouse down mouse move если хочешь того же поведения на десктопе

Не очень понял, можете показать в виде кода?

https://jsfiddle.net/08at59fu/3/

Чтобы четко работало, нужно отменять больше других событий (страница все еще скроллится на мобильнике). Не стал разбираться. Для демонстрации другой идеи достаточно.

Тыкни в красное и начни вести. В красный блок будут выводиться координаты куда пошел палец/курсор после тыка. Работает на десктопе и на мобильнике.

И конечно-же так код писать не надо, тут главное уловить концепт.

$('.target').on('touchstart mousedown', () => {
	$(document).on('touchmove mousemove', (event) => {
  	event.preventDefault()
		$('.target').text(event.pageX + '-' + event.pageY)
	})
	$(document).on('touchend mouseup', (event) => {
		$(document).off('touchmove mousemove')
	})
})

https://codepen.io/marki1404/pen/OYzXVX
Переменная свайпов равна скроллу боди, в чем проблема?
Почему боди не скролиться?

var scroll    = $("body").scrollTop();
  scroll        = positionY;

js та не работает. Тебе нужно взять данные из positionY и вызвать метод, который проскроллит на некоторое количество.

Вот “примерный” код чтобы показать идею: https://codepen.io/anon/pen/rgpMRM

Ок, спасибо за пример, я почти все понял, но можно при меньшем свайпе скроллить страницу больше. Я имею в виду к каждому свайпу вниз или вверх, добавлять например 500px

Да. Это уже тебе рассчитывать куда и как просктроллить страницу.

И еще, почему в вашем примере скролл очень медленно и трудно идет вверх, а вниз легко?

Потому что нужна другая логика на сколько скроллить страницу. Я скролю на откровенно случайное значение. Если использовать scrollTop, то в формуле на сколько скроллить, нужно учитывать текущее значение на сколько уже страница проскроленна

https://codepen.io/marki1404/pen/BeJpoL
Примерно вот так? Но тогда скролл будет только вниз.

Попробуй найти api (возможно scrollTop тоже сработает) которое позволяет скроллить в любую сторону. Пиши формулу на сколько скроллить - и будет в обе стороны.


https://codepen.io/marki1404/pen/BeJpoL

Если это попытка сделать работающий вариант из моего примера - это гиблый путь. Мой пример чисто для демонстрации механики. Конечное решение должно быть более продуманным и стуктурированным.

Не совсем понятно …

Например запоминай точку при touchstart, смотри если touchmove влево от нее, то формула, что напишешь, будет выдавать отрицательное значение на сколько скроллить, если вправо - положительное. Я предполагаю что api на сколько скроллить требует отрицателных значений чтобы скроллить вверх и положительных чтобы вниз.

Суть я понял. Но не до конца понятно с написанием. Можете пожалуйста скинуть пример?