Криво, но работает почти как должно.
$('.js-line-wave').on('mouseenter, mousemove', function(e) {
// Здесь расчитывается относитеьное положение курсора чтобы от него считать синус
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
$('.line, .button_wave, .line_item').each(function(index, letter) {
var posx = index;
// Здесь нужно править магические числа, например вместо 352 надо ставить ширину элемента
//и ещё нужно править частоту волны и амплитуду, но я забыл формулы
var posy = Math.sin((index / 10 + relativeX / 352) * 180 / Math.PI) * 30 - 20;
// Здесь происходит применение синуса только к 30 элементам слева и справа от мышки
if ($(letter).position().left > relativeX - 30 && $(letter).position().left < relativeX + 30) {
$(letter).css("transform", "translateY(" + posy + "px)");
} else {
$(letter).css("transform", "translateY(" + 0 + "px)");
}
});
});
