Как сделать движение в зависимости от движения мыши?

Question

[Сергей Горячев]

Привет.
Немного не могу сделать одну вещь, может есть что-то готовое уже.
Нужно двигать фон body в завимости от движения курсора мыши.
При движении мыши влево - фон двигается вправо. При движении мыши вниз - фон вверх.
У меня фоновая картинка 3200х1800, background-size: 150%.
Надеюсь, ничего не полетит при таком движении.
Как это реализовать правильно?

UPD: Нашел вот такой скрипт:

$('body').mousemove(function(e){
        var amountMovedX = (e.pageX * -1 / 12);
        var amountMovedY = (e.pageY * -1 / 12);
        $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
    });

Технически он работает, но курсор считает от позиции 0 0, а у меня фон 50% 50%.
И если курсор был ВНЕ body, происходит скачек некрасивый.

Answer 1

[Stalker_RED]

Слушать mousemove и сдвигать фон. Готовые решения гуглятся по "css parallax background".

Набросал пример: https://jsfiddle.net/f320bmuu/26/embedded/result/

Comments

[Сергей Горячев]

К сожалению, та же проблема, что и описанная выше.
Ставим курсор куда-то кроме центра страницы, обновляет, двигаем мышь и сильный скачек происходит.
Так конечно спасибо, отмечу решением, но не подходит немного.

[Stalker_RED]

Это можно учесть, сохранив стартовые координаты мыши.

[Сергей Горячев]

Stalker_RED: прям сразу вопрос напрашивается "А что так можно было?")))

[Stalker_RED]

Sergey: Ну, я набрасывал пример "чтоб побыстрее да попроще".
А так при первом сдвиге мыши записываем координаты и добавляем в формулу дополнительный сдвиг.

[zwezew]

Stalker_RED, хоть и запоздало, а можно чуть подробнее?

[Stalker_RED]

zwezew, что именно подробнее? Есть готовые библиотеки, а на jsfiddle я выложил только набросок из нескольких строки (кстати, вот обновил ссылку).

[zwezew]

Stalker_RED, про этот момент "А так при первом сдвиге мыши записываем координаты и добавляем в формулу дополнительный сдвиг."

Т.е. при загрузке страницы получаем координаты мыши и бэкграунд уже встает на эти координаты?

[Stalker_RED]

zwezew, не не можете из скрипта на странице узнать координаты мыши пока мышь не произведет какое-то действие (клик или mousemove).

Но при первом-же действии можете посчитать в каком месте находится указатель и внести необходимые поправки чтобы не дергалось.

[zwezew]

Stalker_RED, если честно, никак не могу понять, как это срабатывает. Наводим курсор на страницу, он получает pageX pageY, проводятся нужные расчеты и позиция бэкграунда сразу скачет на полученные значения. Если ставить transition, то фон переместится плавно, но при дальнейшем движении курсора он будет двигаться рвано.

[Stalker_RED]

zwezew,

и позиция бэкграунда сразу скачет на полученные значения

Кто мешает делать это плавно?

но при дальнейшем движении курсора он будет двигаться рвано

почему?

[Stalker_RED]

zwezew, я конечно могу сейчас добавить плавности переделав background-position на transform: translate, но не вижу смысла.
Эти 10 строк кода НЕ ЯВЛЯЮТСЯ ГОТОВЫМ РЕШЕНИЕМ.

Можете их использовать как отправную точку, если хотите сделать своё самодельный параллакс с блекджеком.

Или возьмите что-то готовое.

[Katusha47]

Stalker_RED, привет, хотела бы спросить как сделать подобный эффект https://qlick.studio/ при движении мыши

[Stalker_RED]

Katusha47, вот так: thenewcode.com/1159/Create-a-Dynamic-Point-Mesh-An...

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