Christian Harrison
Reputation: 5
How would i implement JavaScript into this
Hey Everyone is i have an social bar that i made with CSS and html and i was wondering instead of making it show Quickly how would i implement JavaScript so i can pick the speed that the image slides up This is my code
CSS
.sharing-cl {
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.sharing-cl a {
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("http://theirondoor.x10.bz/V2/images/share-sprite.png") no-repeat;
}
a.sh-Youtube {
background-position:-214px -40px;
}
a.sh-Twitter {
background-position:-61px -40px;
}
a.sh-Rss {
background-position:-143px -40px;
}
a.sh-Facebook {
background-position:20px -40px;
}
a.sh-Youtube:hover {
background-position:-214px 1px;
}
a.sh-Twitter:hover {
background-position:-61px 1px;
}
a.sh-Rss:hover {
background-position:-143px 1px;
}
a.sh-Facebook:hover {
background-position:20px 1px;
}
#text {
margin-top:3em;
font-weight:bold;
font-family:helvetica, arial, sans-serif;
}
#text a {
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
HTML
<ul class="sharing-cl" id="text">
<li></li>
<li><a class="sh-Facebook" href="">Facebook</a>
</li>
<li><a class="sh-Twitter" href="">Twitter</a>
</li>
<li><a class="sh-Rss" href=""> Rss Feed</a>
</li>
<li></li>
<li><a class="sh-Youtube" href="">Youtube</a>
</li>
</ul>
Here is the jsFiddle -> http://jsfiddle.net/Kf5CS/
Upvotes: 0
Views: 76
Answers (1)
Liauchuk Ivan
Reputation: 1993
a.sh-Facebook {
background-position:20px -40px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
So, as you can see, you should use "transition" property to let you icons move, you can setany duration you want in "duration" property
Upvotes: 2