Hybreeder Hybreeder - 5 years ago 141
Javascript Question

I have to use a jQuery mouse scroll animation effect

Please check this link http://test.hybreed.co/demo2/
Its working without mouse scroll but i want to use this mouse scroll animation. If any user hit the link on URL, letter space should be 50px.If first mouse scroll happen than letter space should be 35px, If second mouse scroll happen than letter should be 15px.Please help me with jquery code .

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 Source

check it may be helps.

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download