jQuery addClass example

Change class name on click in jQuery

by drkrol

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="wrap">

</div>

CSS

body {
  background: #20262E;

  font-family: Helvetica;
	overflow: hidden;
}
.box {
  width: 290px;
  height: 290px;
  background: #777;
  margin: 10px;
}

JavaScript

for (var i = 0; i < 100; i++) {
  $('.wrap').append('<div class="box"></div>');
}


var per1 = 0, // переменная
    per2 = 0, // переменна
    shag = 300, // Величина шага
    step = shag, // Динамическое значение шага
    speedscroll = 0.7, // Скорость движения
    vverh = "+=",
    vniz = "-=",
    direction = 0; // Направление движения


// Проверка направления прокрутки
function checkDir() {
    if (direction != per2) {
        step = shag;
    }
}

// Фукция самого скролла
function minescroll(direct, speedscroll, step) {
per1 = 1;
  TweenMax.to(
    '.wrap',
    speedscroll, {
      y: direct + step,
      ease: Power2.easeOut,
      onComplete: function() {
        per1 = 0;
        step = shag; // Возврат скорости в исходное положение
      }
    });
}


$(window).bind('wheel', function(event) {
		// условие при двойном кручении
    if (per1 == 1) {
     step = step + shag;
    } else {
     step = shag;
    }

		// Запоминание последнего направления
    per2 = direction;


    // ------- ВНИЗ
    if (event.originalEvent.deltaY >= 0) {
        direction = 2;
        checkDir();
        minescroll(vniz, speedscroll, step);
		// ------- ВВЕРХ
    } else {
        direction = 1;
        checkDir();
        minescroll(vverh, speedscroll, step);
    }
});