Question

请查看此链接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/

Answer 1

检查它可能有帮助。

＆＃13;

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});
		}
    });
});

＆＃13;

.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;

	
}

＆＃13;

<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>

＆＃13;

Answer 2

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,'left':'auto'});
		}
		else if(jQuery(window).scrollTop() > 300){
			 
			jQuery('.effect-spase').css({'letter-spacing':15,'left':'41%'});
		}
		else if(jQuery(window).scrollTop() < 50){			
			
			jQuery('.effect-spase').css({'letter-spacing':50,'left':'auto'});
		}
    });
});

.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>

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

2 个答案: