マウスホイールを使って円をスクロールする方法は？

Question

私は1つの円を持っており、マウスのスクロールホイールまたは矢印を使用して360度回転させる必要がありますが、円が青い境界線に触れると開始します。今すぐスクロールして青い枠線に触れるとコードが動作しています。しかし、マウスホイールを使って円をスクロールする必要があります。私はマウスのホイールを使用して私はまた、逆もまた回転する必要があることを意味します。

どうすればいいですか？ wheelイベントを使用して

$(window).bind('scroll', function() { 
 
    var l_360 = document.getElementById("l_360"); 
 
    var controller = new ScrollMagic.Controller(); 
 
    var tween = TweenLite.to(l_360, 3, { 
 
    x: -1910, 
 
    y: 350, 
 
    rotation: 360, 
 
    opacity: '1', 
 
    ease: Linear.easeOut 
 
    }); 
 
    var scene = new ScrollMagic.Scene({ 
 
     triggerElement: "#l_360" 
 
    }) 
 
    .setTween(tween) 
 
    .setClassToggle('#l_360', 'fade-in') 
 
    .addTo(controller); 
 

 
});

.parent_img { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    text-align: right; 
 
} 
 

 
.content, 
 
.content_2, 
 
.content_3 { 
 
    width: 700px; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    margin-top: 400px; 
 
} 
 

 
.main_l { 
 
    position: fixed; 
 
    right: 115px; 
 
    top: 20px; 
 
    z-index: 100; 
 
} 
 

 
.main_l .l_circle { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: #EFBD40; 
 
    border-radius: 50%; 
 
    display: flex; 
 
} 
 

 
.main_l .l_circle h2 { 
 
    margin: auto; 
 
    color: #fff; 
 
    font-size: 35px; 
 
} 
 

 
.blue { 
 
    background-color: #0082ff; 
 
    transform: skew(0deg, -10deg); 
 
    z-index: -1; 
 
    /*color: #fff;*/ 
 
} 
 

 
.blue .container { 
 
    transform: skew(0deg, 10deg); 
 
    position: relative; 
 
    top: 50px; 
 
}

<div class="main_l" id="l_360"> 
 
    <div class="l_circle"> 
 
    <h2>360 circle</h2> 
 
    </div> 
 
</div> 
 

 
<div class="blue"> 
 
    <div class="container"> 
 
    <div class="content"> 
 
     <h2>This is just for testing</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

Answer 1

あなたがホイールをスクロールする方向のためのデルタを与えるだろう。たとえば、垂直ホイールの動きを検出するには、プロパティdeltaYが負の値（正方向）または正の値（後方）のいずれかになります。

値は直接使用できますが、ブラウザやシステムによって異なる場合があります。

例

var div = document.querySelector("div"); 
 
var angle = 0; 
 
document.onwheel = function(e) { 
 
    if (e.deltaY) {     // we have a wheel for vertical (common) direction 
 
    e.preventDefault(); 
 
    angle += e.deltaY < 0 ? 4 : -4; // what direction? 
 
    div.style.transform = "rotate(" + angle + "deg)"; // do something 
 
    } 
 
};

body {margin:30px} 
 
div {border-radius:50%;border:3px solid #09f;width:150px;height:150px;}

<div> O</div>