【发布时间】：2016-04-11 11:30:21
【问题描述】：
请查看此链接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/
【问题讨论】：
-
嗨@Hybreeder，如果可能的话，滚动大小为e。 50px .. 和我做的 100px ......但不能得到第一个滚动，第二个滚动......如果做为“PX”，让我知道我会帮助你。
-
感谢Mansukh先生的回复。好的。请帮我写代码
标签： javascript jquery css animation jquery-animate