javascript - 我必须使用jQuery鼠标滚动动画效果

请检查此链接http://test.hybreed.co/demo2/
    它无需鼠标滚动即可工作，但我想使用此鼠标滚动动画。如果有任何用户点击URL上的链接，则字母空间应为50px。如果第一次鼠标滚动而不是字母空间应为35px，如果第二次鼠标滚动而不是字母空间应为15px。请使用jquery代码帮助我。

的HTML

    <link rel="stylesheet" href="style.css">
    </head>
    <body>


    <div class="header-text">
        <ul>

            <li><h2 class="letter-1">A</h2></li>
            <li><h2 >B</h2></li>
            <li><h2 class="letter-3">C</h2></li>

            <li><h2 class="letter-1">D</h2></li>
            <li><h2>E</h2></li>
            <li><h2 class="letter-3">F</h2></li>
            <li><h2 class="letter-7">G</h2></li>
            <li><h2 class="letter-8">H</h2></li>


            <li><h2 class="letter-1">I</h2></li>
            <li><h2>J</h2></li>
            <li><h2 class="letter-3">K</h2></li>
            <li><h2 class="letter-4">L</h2></li>
            <li><h2 class="letter-5">M</h2></li>
            <li><h2 class="letter-6">N</h2></li>
    </ul>
        </div>

    </body>
    </html>

的CSS

    .header-text
    {

        text-align: center;
    }

    ul li{

        text-decoration: none;
        list-style: none;

    }

    ul li h2{

        float: left;
        letter-spacing: 50px;

        margin:300px 12px;
        }


        .letter-1{
        position: relative;
        -webkit-animation: move-h 5s forwards;
            animation: move-h  5s forwards;

        }


        /* Chrome, Safari, Opera */
    @-webkit-keyframes move-h  {
        from {left: 0px;}
        to {left: 50px; text-align: center;}
    }

    @keyframes move-h  {
        from {left: 0px;}
        to {left: 50px; text-align: center;}

    }





    .letter-3{
        position: relative;
        -webkit-animation: letter-3-e 5s forwards;
            animation: letter-3-e  5s forwards;
        }


        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-3-e   {
        from {right: 0px;}
        to {right: 50px;text-align: center;}
    }

    @keyframes letter-3-e   {
        from {right: 0px;}
        to {right: 50px;text-align: center;}
    }


    .letter-4
    {position: relative;
        -webkit-animation: letter-4-d 5s forwards;
        animation: letter-4-d  5s forwards;
        }



        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-4-d   {
        from {right: 0px;}
        to {right: 100px;}
    }

    @keyframes letter-4-d   {
        from {right: 0px;}
        to {right: 100px;}
    }




    .letter-5
    {position: relative;
        -webkit-animation: letter-5-i 5s forwards;
        animation: letter-5-i  5s forwards;
        }



        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-5-i   {
        from {right: 0px;}
        to {right: 150px;}
    }

    @keyframes letter-5-i   {
        from {right: 0px;}
        to {right: 150px;}
    }


    .letter-6
    {position: relative;
        -webkit-animation: letter-6-o 5s forwards;
        animation: letter-6-o  5s forwards;
        }



        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-6-o   {
        from {right: 0px;}
        to {right: 200px;}
    }

    @keyframes letter-6-o   {
        from {right: 0px;}
        to {right: 200px;}
    }



    .letter-7
    {

        position: relative;
        -webkit-animation: letter-7-o 5s forwards;
        animation: letter-7-o  5s forwards;
        }


        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-7-o   {
        from {right: 0px;}
        to {right: 100px;}
    }

    @keyframes letter-7-o   {
        from {right: 0px;}
        to {right: 100px;}
    }

    .letter-8

    {

        position: relative;
        -webkit-animation: letter-8-n 5s forwards;
        animation: letter-8-n  5s forwards;
        }



        /* Chrome, Safari, Opera */
    @-webkit-keyframes letter-8-n   {
        from {right: 0px;}
        to {right: 150px;}
    }

    @keyframes letter-8-n   {
        from {right: 0px;}
        to {right: 150px; }
    }


    .header-text-center
    {


    }

      [1]: http://test.hybreed.co/demo2/

最佳答案

检查它可能会有所帮助。

jQuery(document).ready(function(e) {
    jQuery(window).scroll(function(e) {

        if(jQuery(window).scrollTop() > 50 && jQuery(window).scrollTop() < 300){
			jQuery('.effect-spase').css({'letter-spacing':35});
		}
		else if(jQuery(window).scrollTop() > 300){
			jQuery('.effect-spase').css({'letter-spacing':15});
		}
		else if(jQuery(window).scrollTop() < 50){
			jQuery('.effect-spase').css({'letter-spacing':50});
		}
    });
});

.header-text
{

    height: 1000px;
    text-align: center;
    width: 100%;
}

.effect-spase{
	position:fixed;
	font-size: 30px;
    letter-spacing: 50px;


	transition:all 0.5s ease-in-out;
	-webkit-transition:all 0.5s ease-in-out;


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header-text">
	<div class="effect-spase">Mansukh</div>
</div>