Плавное движение объекта в canvas?

Question

[Игорь Касперский]

Добрый день, хотел сделать параллакс в канвасе как на этом сайте. У них на сайте там есть 2 документа отличающиеся 3 строчками, там много кода, не стал разбираться. Решил сам попробовать, вот начало. Тут проблемка в том, что при наведение мыши по бокам, объекты двигаются с остановкой, а если шевелить мышкой, то они не останавливаются, как сделать, чтобы при наведении на край они не останавливались, т.е. не шевелить курсором? И подскажите в каком направлении идти дальше, не могу сообразить как ограничить движение, и собственно параллакс.

Comments

[copal]

Представьте что Вы сидите в лодке и управляя концом висла, управляете его началом. Ведь Вы помните что висло крепится каким-то подобием шарнира, что задает ему ограниченную траекторию. Вот и Вы так делайте, насколько отодвигаете мышь влево от центра, на столько и сдвигайте фон вправо и наоборот.

[copal]

И сделайте несколько задник слоев и самому ближнему задавайте самую большую скорость.

Answer 1

[trushka]

Лучше сделать для каждого слоя отдельный элемент и двигать с помощью css, меняя transform: translate(). Transition обеспечит намного большую плавность, чем отрисовка на канве.