Анимация волны в зависимости от курсора как?

Question

[Alexey10]

Ребят, всем привет. Уже пару недель мучаюсь над линией. Нужно сделать анимацию при наведении как на сайте https://www.sibirix.ru/ . У меня получилось сделать саму анимацию волны. Но у меня не получается прикрепить её к курсору как на примере. Вот мой код https://jsfiddle.net/alexey10mentor/4kx8aqf7/1/ . Кто сможет помочь, буду благодарен, или возможно совет. Всем спасибо за помощь))
P.S. Украсть код с самого сайта не реально, там ногу сломать можно))

Comments

[Роман]

на данном сайте вся линейка сделана набором тэгов

<span class="line" style="transform: translateY(0px);"></span>

с установленным свойством transform: translateY(0px);
при наведении на область линейки происходит изменение translateY(...) у части span-ов.
По всей видимости это делается js функцией, используемой как обработчик события mousemove для контейнера, в котором размещена линейка. Данная функция зависимости от положения курсора мыши вычисляет смещения по оси Y для всех span-ов линейки и устанавливает их.

PS: конкретную библиотеку, с помощью которой реализован подобный функционал не назову, но невижу проблем написать такое самому.

Answer 1

[asd111]

Криво, но работает почти как должно.

$('.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)");
        }
    });


});

Comments

[Роман]

Вот и реализация подошла. Спасибо.
Сама формула может быть примерно такой (посмотреть);

var dx = relativeX-posx*4.7;
var posy = -Math.cos(dx/50)*50*(5/Math.sqrt(2*Math.PI))*Math.pow(Math.E,-Math.pow(dx/150,2));

В качестве альтернативы могу предложить сделать тоже самое но на канвасе с прозрачным фоном.

[Alexey10]

Роман, Спасибо огромное. Чуть изменил значения в коде твоем и добавил своего чуть-чуть. Мужик ты лучший =)

[Роман]

Моего кода тут только кусок формулы

*(5/Math.sqrt(2*Math.PI))*Math.pow(Math.E,-Math.pow(dx/150,2));

:)

Answer 2

[profesor08]

Задай своему .js-line-wave высоту побольше, чтоб в него вмещалась вся кривая, например height: 300px;

Еще можно для плавности добавить transition: ease transform 100ms; для двигающихся элементов.