jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<div class="container">
  <div class="screen3 scrn">Экран номер три</div>
  <div class="screen2 scrn">Экран номер два с прокруткой</div>
  <div class="screen1 scrn">Экран номер один</div>
</div>

CSS

body {
  margin: 0;
  overflow-x: hidden;
}


.scrn {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font: 16px/210px Tahoma;
}

.container {
  
}


.screen1 {
  background: #D38FF3;
  left: -100%;
  z-index: 1;
}

.screen2 {
  background: #8ACDF3;
  top: -100%;
  z-index: 2;
}

.screen3 {
  background: #ACF394;
  right: -100%;
  left: inherit;
  z-index: 3;
}

JavaScript

// Запуск первого экрана
TweenLite.to($(".screen1"), 1, {
  left: "0%",
  delay: 0.2
});

var wph = 1; // переменная позиции экрана

// Работа с колёсиком мыши
$(window).bind('wheel', function(event) {
  // Если крутим вниз
  if (event.originalEvent.deltaY >= 0) {

    //САМ СКРОЛЛ
    if (wph == 3) { //Если экран 3
      console.log("pereshli na 3");
      wph = 3;
    } else if (wph == 2) { //Если экран 2
      // Появление экрана 3
      var tl = new TimelineLite();
      tl.to($(".screen3"), 1, {
        right: "0%",
      }).to($(".screen2"), 0.7, {
        height: "100%"
      });
      wph = 3;
    } else { //Если экран 1
      // Появление экрана 2
      TweenLite.to($(".screen2"), 1, {
        top: "0%",
        height: "150%",
      });
      wph = 2;
    }

  } else {
    // Если вверх, но это пока неважно
  }

});