Kaydırma olayına bağlı olarak sınıf ekleme ve kaldırma

Question

Kullanıcıların aşağı veya yukarı kaydırıp kaydırmaya bağlı olarak ders eklemek ve kaldırmak istiyorum. Şimdiye kadar wheelDelta olayı ile denedim. Kaydırma çubuğu yok, sayfa taşma gizli ile 100vw ve 100vw kullanır. Buna benzer bir şeye ulaşmak istiyorum: http://www.sound-of-change.com/#/intro/.

HTML

<div id="wrapper"> 
<div class="item-1"></div> 
<div class="item-2"></div> 
<div class="item-3"></div> 
<div class="item-4"></div> 
</div> 

CSS

#wrapper { 
width:100vw; 
height:100vh; 
overflow:hidden; 
} 

Yani kaydırdığı ben her zaman birisi için sınıfları eklemek ve kaldırmak mümkün istediğinizde aşağı kayar veya yukarı. Örneğin, kullanıcı 4 kez aşağı veya yukarı kaydırabilir. Ve aslında eylemler listesinde yukarı veya aşağı (kaydırma yönüne bağlı olarak) gider.

Varsayılan: Aşağı kez Durum 0

gelin -> Durum tekrar aşağı 1

gelin -> Durum 2

artık kullanıcıların kaydırır kadar Ama eğer -> Durum 1

tetiklenecek aşağı tekrar

gelin -> Geri duruma 2

tekrar aşağı doğru kaydırın -> durum 3

Şimdiye kadar sadece yukarı ve aşağı kaydırırken bir olayı tetiklemeyi başardım, ama bu kadar. Örnek:

$('body').bind('mousewheel', function(e){ 
    if(e.originalEvent.wheelDelta /120 > 0) { 
       $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(0%)"}); 
     $(".logo-text").removeClass("hide-logo"); 
     $(".logo-img").removeClass("come-closer"); 
    } 
    else{ 
     $(".cd-background-wrapper").css({'-webkit-filter': "grayscale(100%)"}); 
     $(".logo-text").addClass("hide-logo"); 
     $(".logo-img").addClass("come-closer"); 
    } 
}); 

Answer 1

kullanın sayacı, böyle bir şey olduğu durum bilmek:

var count = 1; 
 

 
$("body").on('mousewheel', function(e) { 
 
    if (e.originalEvent.wheelDelta/120 > 0) { 
 
    count -= 1; 
 
    } else { 
 
    count += 1; 
 
    } 
 
    if (count < 1) count = 1; 
 
    if (count > 4) count = 4; 
 

 
    switch (count) { 
 
    case 1: 
 
     // do something 
 
     break; 
 
    case 2: 
 
     // do something 
 
     break; 
 
    case 3: 
 
     // do something 
 
     break; 
 
    case 4: 
 
     // do something 
 
     break; 
 
    } 
 

 
    // Just a example that it works 
 
    $("#wrapper").attr("data-slide", count); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
[data-slide="1"] { 
 
    background-color: red; 
 
} 
 

 
[data-slide="2"] { 
 
    background-color: green; 
 
} 
 

 
[data-slide="3"] { 
 
    background-color: blue; 
 
} 
 

 
[data-slide="4"] { 
 
    background-color: orange; 
 
} 
 

 
#wrapper { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper" data-slide="1"></div>