Как контролировать translate при помощи мыши?

Question

[zeni1agent]

Могу ли я контролировать анимацию translate при помощи мыши
Другими словами могу ли я двигая мышь прокручивать анимацию translate вперед и назад зажав мышь в условном месте
В случае если анимация завершена срабатывать функцию например которая выводит alert('завершено') а если я отжал сщелчок мыши то функция не срабатывает.

Единственное что я смог сделать так это так

$('.blok').on('click', function(e){
  e.preventDefault();
$('.blok').toggleClass('block_act')	
})

.blok{
transform:   translate(0%, 0%); 
transition:1s;
}
.block_act{
transform:   translate(-100%, 0%); 
}

Comments

[Роман]

что такое "анимация translate" ?

[zeni1agent]

Роман,

.block{
transform:   translate(-100%, 0%); 
}
.block:checked{
transform:   translate(0%, 0%); 
}

Если кратко

[Роман]

zeni1agent, понял, ответа на ваш вопрос не знаю.

[Rustam Bainazarov]

zeni1agent, вам будет проще использовать Swiper JS в режиме свободной прокрутки.

Answer 1

[Ragtime Kitty]

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

Простенький пример, топорный и на ванильном JS


Ну а можете просто воспользоваться готовым решением типа slick