JQuery Кнопка, реагирующая на зону нажатия

270
03 мая 2017, 10:23

Как сделать кнопку, которая будет отклоняться в сторону курсора при нажатии? Т.е., если нажать на верх кнопки, она отклонится вверх, на левую часть - влево, и т. д.

Для этого сначала я определяю зону, где произошёл клик (хоть код и ужасный, признаю, но зона всегда определяется правильно!), однако что происходит с анимацией - я ума не приложу: к примеру, по Y происходит отклонение только вверх, независимо от параметра 1 или -1.

function pitch(e) {
 var bound = $(this)[0].getBoundingClientRect(); 
 var x = e.screenX;
 var y = e.screenY;
 var deg = 30;
 var pitch_y = 0;
 var pitch_x = 0;
 if (x < bound.left + bound.width / 3) {
    pitch_y = 1;
 } else if (x > bound.right - bound.width / 3) {
    pitch_y = -1;
 }
 if (e.pageY < $(this).offset().top + bound.height / 3) {
    pitch_x = 1;
 } else if (e.pageY > $(this).offset().top + bound.height * 2 / 3) {
    pitch_x = -1;
 }
 $(this).transition({
    rotate3d: pitch_x + ', ' + pitch_y + ', 0, ' + deg + 'deg'
 });
}

Подобный эффект (каким я хочу его видеть) можно видеть при нажатии на плитки в меню "Пуск" Windows 10.

Для функции .transition использую библиотеку Transit <script src="res/script/jquery.transit.min.js"></script>

READ ALSO
Не работает запрос и ответ от сервер AJAX JSON JavaScript Java Servlet

Не работает запрос и ответ от сервер AJAX JSON JavaScript Java Servlet

ЗдравствуйтеНе знаю, почему по нажатию на кнопку не выполняется запрос на сервер и не выводит результат

240
Проблема с скроллом на jQuery

Проблема с скроллом на jQuery

По клику на кнопку должно скролить на секцию ниже, но выбивает ошибку Uncaught TypeError: Cannot read property 'top' of undefinedПодскажите в чем ошибка

228
browserSync при обновлении CSS прыгает страница

browserSync при обновлении CSS прыгает страница

При обновлении страницы через gulp + browserSync прыгает страница в самый верх, хотя редактирую footer

302
1366 Incorrect string value исправить через миграции?

1366 Incorrect string value исправить через миграции?

Появилась проблема, при сохранении в базу текста(кириллицей) вылетает ошибка 1366 Incorrect string value

216