jQuery addClass example

Change class name on click in jQuery

by Алексей Касьян

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>
					<span class="line"></span>
					<span class="line"></span>
					<span class="line"></span>
					<span class="line"></span>
					<span class="line"></span>
					<div...

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 {
    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

var starttime = new Date().getTime();

	$('.js-line-wave').on('mouseenter, mousemove',  function(e) {
  var elapsed = new Date().getTime() - starttime;
  var pos = elapsed * 0.1;

  $('.line, .button_wave, .line_item').each(function(index, letter) {
    var posx = (pos + 10 * index);
    console.log(posx);
    var posy = Math.sin(posx / 60) * 20;
    $(letter).css("transform", "translateY(" + posy + "px)");

  });


});