html - How would i implement JavaScript into this -
hey have social bar made css , html , wondering instead of making show how implement javascript can pick speed image slides code
css
.sharing-cl { overflow:hidden; margin:0; padding:0; list-style:none; } .sharing-cl { 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 { 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 jsfiddle -> http://jsfiddle.net/kf5cs/
a.sh-facebook { background-position:20px -40px; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; }
so, can see, should use "transition" property let icons move, can setany duration want in "duration" property
Comments
Post a Comment