Анимация реактивного переполнения мыши с помощью javascript ... вещь

Question

Я пытаюсь создать общий виджет, который можно использовать для «переполнения прокрутки» при переполнении содержимого при перемещении мыши / мыши. Все хорошо, я привел это здесь, чтобы вы увидели пример:

http://jsfiddle.net/qR5ra/1/

Проблема возникает при попытке добавить «ослабление» к противодействию/ репозиционирование.ПРИМЕЧАНИЕ: я не могу использовать jQuery или какой-либо другой инструментарий, здесь должен быть настоящий / raw JS.

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

РЕДАКТИРОВАТЬ: В идеале это что-то межбраузерное и с минимальными накладными расходами.

Answer 1

Вы можете добавить некоторые свойства CSS-перехода, чтобы сгладить движение div. Просто мысль, хотя; ваш код на самом деле выглядит довольно хорошо.

body
{
    overflow:hidden;
    margin:0px;
    padding:0px;
}
.box{
    position:absolute;
    background-color:grey;
    opacity:0.4;
    border: 2px dotted blue;
    -webkit-transition:left 0.5s;
    -moz-transition:left 0.5s;
    -o-transition:left 0.5s;
    transition:left 0.5s;
}

Answer 2

Я публикую это для пользы кого-либо с таким же вопросом / проблемой.

В конце концов, лучшее, простое кросс-браузерное решение без всякой чуши jQuery было просто запустить цикл javascriptс таймером.вот скрипка: http://jsfiddle.net/4YeX9/1/

основа кода взята из действительно полезного сообщения в блоге здесь: http://shiriru.blogspot.com/2007/09/javascript-animation-simple-easing.html

надеюсь, что это поможет кому-то там.

Answer 3

<shill>

Я выпустил супер-простую библиотеку анимации / изгиба значений: http://squeegy.github.com/TweenCurve/

Она работает исключительно с числами, без привязки DOM или встроенных таймеров.Он может быть простым и достаточно гибким для использования.