jQuery addClass example

Change class name on click in jQuery

by satantx

HTML

<div id="wrapper">
  <div class="block" style="background-image: url(https://images.unsplash.com/photo-1558980664-2cd663cf8dde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
    <div class="ballow item1">
      <button data-scroll="gift">Нажми</button>
    </div>
  </div>
  <div class="block" style="background-image: url(https://images.unsplash.com/photo-1568206269068-80df3b99e38f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1348&q=80)">
    <div class="ballow item2"></div>
    <div class="ballow item2" data-ratio="3"></div>
  </div>
  <div class="block" style="background-image: url(https://images.unsplash.com/photo-1568125341624-be3bb6554abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
    <div class="ballow item3"></div>
  </div>
  <div class="block" style="background-image: url(https://images.unsplash.com/photo-1568213106271-ae98d99e6a0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
    <div class="ballow item4"></div>
  </div>
  <div id="gift" class="block" style="background-image: url(https://images.unsplash.com/photo-1562101660-b3a3c873d5f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)">
    <div class="ballow item5"></div>
  </div>
  <div class="block" style="background-image: url(https://images.unsplash.com/photo-1568214898574-c4f89ef5dc79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1326&q=80)">
    <div class="ballow item6"></div>
  </div>
</div>

CSS

body {
  background: #20262E;
  font-family: Helvetica;
}

#wrapper {
  overflow: hidden;
}

.block {
  height: 100vh;
  position: relative;
}

.ballow {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #FB754F;
  position: absolute;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}

.item1 {
  left: 40px;
  top: 50px;
}

.item2 {
  right: -40px;
  top: 20px;
}
.item3 {
  left: -40px;
  top: -40px;
  width: 100px;
  height: 100px;
}
.ite4 {
  right: 40px;
  top: 50%;
}
.item5 {
  left: 0;
  top: 30px;
}
.item6 {
  right: -100px;
  top: 100px;
}

JavaScript

$('.ballow').each(function(){

	var el = $(this);
  var elTop = el.offset().top;
  var ratio = el.data('ratio') / 2 || 1;
  
  $(window).scroll(function () {
    scroll = Math.round(elTop - $(this).scrollTop() * ratio);
    el.css({
      'transform': 'translateY(' +scroll + 'px)',
      'opacity': '1'
    })
  });
  
});

$('[data-scroll]').on('click', function() {
	var target = $(this).data('scroll');
  var el = $('#'+target).offset().top;
  $('body, html').stop().animate({scrollTop: el}, 2500);
});