jQuery addClass example

Change class name on click in jQuery

HTML

<div class="wrapper">

  <section class="tp_section tp_block js-tp">
    <div class="container">

      <div class="line_wave_block js-line-wave">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave active" href="#tab1">
          <div class="tons_text">
            1,5
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <a class="button_wave" href="#tab2">
          <div class="tons_text">
            3
          </div>
        </a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
        <div class="line_item"></div>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
       ...

CSS

.wrapper {
  overflow: hidden;
  padding-bottom: 1000px;
}

section.tp_section {
  padding-top: 144px;
  padding-bottom: 88px;
}

.container {
  margin: 0 auto;
  position: relative;
  padding: 0 15px;
  width: 100%;
  max-width: 1196px;
}

.line_wave_block {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  margin: 95px 0 53px;
}

.line_wave_block .line {
  display: block;
  flex-basis: 100%;
  position: relative;
  z-index: -1;
}

.line_wave_block .line:before {
  content: '';
  width: 3px;
  height: 4px;
  display: block;
  background-color: rgba(0, 174, 239, 0.5);
  margin: 0 auto;
  border-radius: 50%;
}

.button_wave,
.line_item {
  position: relative;
  flex-basis: 100%;
  z-index: 3;
}

.button_wave {
  transition: all 0.1s ease 0.1s;
  cursor: pointer;
  display: block;
}

.line_wave_block .button_wave::before {
  content: '';
  width: 33px;
  height: 20px;
  border-radius: 40px;
  display: block;
  background: linear-gradient(to bottom, #00EBDB, #008FF2);
}

.line_wave_block .button_wave:hover::before,
.line_wave_block .button_wave.active::before {
  background: linear-gradient(to bottom, #FF8070, #FF5971);
}

.tons_text {
  position: absolute;
  bottom: -54px;
  color: #5F42DF;
  font-size: 27px;
  line-height: 32px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.line_wave_block .line_item::before {
  content: '';
  width: 7px;
  height: 23px;
  border-radius: 40px;
  display: block;
  background: rgba(0, 174, 239, 0.5);
}

JavaScript

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


});