Кинетическая прокрутка

[vvsh]

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

(листание контактов)

это возможно на javascript?

заранее спасибо

[s0rr0w]

Конечно же возможно.

[Great Rash]

Ищите инфу про EaseIn, EaseOut и т.п.

Поищите тут. Я как то тоже этой темой интересовался и камрад s0rr0w очень дельные советы давал.

[vvsh]

Конечно же возможно.

а может по-подробнее рассказать как, и что для этого нужно применить.

[Great Rash]

Вот все за вас делать надо... лентяй вы батенька.

[vvsh]

я нашел эту тему, просто я не могу вообще понять как это сделать, как это реализуется

[Great Rash]

Не понял? Там же практически готовый код!

[vvsh]

я не понимаю как можно мышкой взять и как бы листать

[Great Rash]

Надо идти от простого к сложному наверное. Для начала реализуйте drag&drop, допустим, только по вертикали (ну или куда там надо листать).

[vvsh]

ты мне это так говоришь, как-будто я ничего не умею, я хотел бы чтобы s0rr0w объяснил мне вообще как это будет работать

[Great Rash]

Я ничего не говорю про ваши знания.

Ок, распишу как я это представляю, если вам так хочется:

1) реализуем drag&drop;

2) при перетягивании проверяем доехал ли наш слой до середины контейнера и если да, то на mouseup запускаем анимацию easeOut (с замедлением), которая доводит слой до края контейнера;

3) если слой не доехал до середины то таким же макаром возвращаем его назад;

у меня нет айпода, но помоему там рабочий стол работает именно так

[s0rr0w]

Драг и дроп тут в чистом виде не нужен.

Для решения задачи нам потребуется

1. Узнать, есть или нет нажатия мыши где-то на контейнере.

2. Потом мониторить mousemove, и смотреть

а) в какую сторону движется мыша. Это программа-минимум

б) мониторить расстояние, на которое сдвинулась мыша

в) с какой скоростью движется мыша. Это программа-максимум

3. Получив направление движения и расстояние, на которое сдвинулась мыша, можно рассчитать некий импульс, который будет выражен в виде длинны смещения, на которое нужно проскроллить наш контент.

4. Запустить процесс скроллинга на нужное расстояние, используя формулы затухания, которые были приведены в ветке выше.

Все.

[rash]

Пока писал вопрос, сам придумал решение, всем спасибо :-)

[vvsh]

Для решения задачи нам потребуется

1. Узнать, есть или нет нажатия мыши где-то на контейнере.

2. Потом мониторить mousemove, и смотреть

а) в какую сторону движется мыша. Это программа-минимум

б) мониторить расстояние, на которое сдвинулась мыша

в) с какой скоростью движется мыша. Это программа-максимум

3. Получив направление движения и расстояние, на которое сдвинулась мыша, можно рассчитать некий импульс, который будет выражен в виде длинны смещения, на которое нужно проскроллить наш контент.

4. Запустить процесс скроллинга на нужное расстояние, используя формулы затухания, которые были приведены в ветке выше.

Все.

Спасибо что откликнулся.

Что я сделал, 1, 2, а, б, это готово

с какой скоростью, это расстояние, то бишь координата X на время, это попробую сделать.

с 3 и 4 проблема, так как мне надо запускать скролл как только я начал движение мышью, а не тогда когда прекратил уже, что с этим делать?

и можно убрать выделение контента в этом диве?

http://vvsh.ru/scroll/index.html - вот что есть

[s0rr0w]

с 3 и 4 проблема, так как мне надо запускать скролл как только я начал движение мышью, а не тогда когда прекратил уже, что с этим делать?

У тебя должно быть два независимых процесса

1. Рассчет новой координаты, куда должен двигаться контент.

2. Анимация, которая по определенному алгоритму будет двигать этой фрейм.

и можно убрать выделение контента в этом диве?

Для ИЕ есть атрибут onselectstart="return false;"

От него отталкивайся и ищи в инете решения для остальных

[rash]

Так если контент будет перетаскиваться мышью, пока она не отпущена, ничего выделяться не будет.

[Great Rash]

А то что под контентом (если он absolute) будет.

[rash]

Гм, ну это ели там что-нибудь вообще будет, да :-)

[vvsh]

У тебя должно быть два независимых процесса

1. Рассчет новой координаты, куда должен двигаться контент.

2. Анимация, которая по определенному алгоритму будет двигать этой фрейм.

да, спасибо, попробую сделать.

а как сделать сам этот блок в котором крутить можно будет, как его сверстать?

[s0rr0w]

да, спасибо, попробую сделать.

а как сделать сам этот блок в котором крутить можно будет, как его сверстать?

Зависит от ТЗ.

[vvsh]

представь что блок в виде div'а, это экран телефона, и нет скролла, и как бы в диве все спрятано кроме того что влезает в экран, и я могу листать