Keen Keen - 6 months ago 15
jQuery Question

I want that "mousewheel event delay"

I want that..
mousewheel event delay

example...I run wheeldown..so change "bg_02".
but change bg_05..
so i want delay
one wheeldown and change bg_01 -> bg_02
one wheeldown and change bg_02 -> bg_03
...
now wheeldown than change bg_01 -> bg_04 or wheeldown count ++

sorry my english is little

script



// Wheel
function wheel(){
if (event.wheelDelta >= 120){
wheelUp();
return;
}
else if (event.wheelDelta <= -120){
wheelDown();

}
}
var bgSpot = $('.bg_spot');
var bgSpot_Cnt = bgSpot.length;
bgSpot.eq(0).addClass('spot_on').css('top','0');

// Down
function wheelDown(i){
$('.spot_on').addClass('move_top');
$('.spot_on').next().css('top','0');
$('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
}


CSS



.bg_spot{position:fixed;top:100%;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;}

.move_top{
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);}

.move_stage{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}

.top_0{top:0}
.bg_01{background:#ccc;}
.bg_02{background:#000;}
.bg_03{background:olive;}
.bg_04{background:green}


HTML



<body onmousewheel="wheel();">
<div class="bg_spot bg_01">&nbsp;</div>
<div class="bg_spot bg_02">&nbsp;</div>
<div class="bg_spot bg_03">&nbsp;</div>
<div class="bg_spot bg_04">&nbsp;</div>
</body>

Answer

changed your css and javascript. check the snippet

 function wheel() {
     if (event.wheelDelta >= 120) {
       //    wheelUp();
       return;
     } else if (event.wheelDelta <= -120) {
       wheelDown();

     }
   }
   //        var bgSpot = $('.bg_spot');
   //        var bgSpot_Cnt = bgSpot.length;
   //        bgSpot.eq(0).addClass('spot_on').css('top', '0');

 // Down
 var i = 1,
   j = 0;

 function wheelDown() {

   $('.bg_spot').hide();


   $('.bg_0' + i).show();

   // $('.spot_on').addClass('move_top');
   // $('.spot_on').next().css('top', '0');
   //  $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');

   i++;
   if (i > 4)
     i = 1;
 }
.bg_spot {


  overflow: hidden;


  position: absolute;


  right: 0;


  left: 0;


  z-index: 10;


  width: 100%;


  height: 100%;


  -webkit-transition: 0.6s ease;


  -moz-transition: 0.6s ease;


  -o-transition: 0.6s ease;


  transition: 0.6s ease;


  display: none;


}


.move_top {


  -webkit-transform: translate3d(0, -100%, 0);


  -moz-transform: translate3d(0, -100%, 0);


  -o-transform: translate3d(0, -100%, 0);


  transform: translate3d(0, -100%, 0);


}


.move_stage {


  -webkit-transform: translate3d(0, 0, 0);


  -moz-transform: translate3d(0, 0, 0);


  -o-transform: translate3d(0, 0, 0);


  transform: translate3d(0, 0, 0);


}


.top_0 {


  top: 0


}


.bg_01 {


  background: #ccc;


}


.bg_02 {


  background: #000;


}


.bg_03 {


  background: olive;


}


.bg_04 {


  background: green


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body onmousewheel="wheel();">
  <div class="bg_spot bg_01" style="display:block;">
    &nbsp;</div>
  <div class="bg_spot bg_02">
    &nbsp;</div>
  <div class="bg_spot bg_03">
    &nbsp;</div>
  <div class="bg_spot bg_04">
    &nbsp;</div>
</body>