ボタンを押すとソーシャルアイコンが出てくるやつ
Result
jQuery
$(document).click(function() {
$('#facebook_share , #twitter_share , #google_share').css('top', '-80px');
});
$('.twitter').click(function() {
$('#twitter_share').animate({
opacity: 1,
top: 10
}, {
queue: false,
duration: 'slow'
});
$('#facebook_share , #google_share').animate({
opacity: 0, top: '-80px'
}, {
queue: false,
duration: 'slow'
});
});
$('.facebook').click(function() {
$('#facebook_share').animate({
opacity: 1,
top: 10
}, {
queue: false,
duration: 'slow'
});
$('#twitter_share , #google_share').animate({
opacity: 0,
top: '-80px'
}, {
queue: false,
duration: 'slow'
});
});
$('.google').click(function() {
$('#google_share').animate({
opacity: 1,
top: 10
}, {
queue: false,
duration: 'slow'
});
$('#facebook_share , #twitter_share').animate({
opacity: 0,
top: '-80px'
}, {
queue: false,
duration: 'slow'
});
});
|
ToDo:あとで軽量化
css
#social {
background: #eee;
width: 126px;
height: 30px;
margin: 0 auto;
padding: 20px 0px 10px 10px;
position:relative;
z-index:2;
}
#social li {
width: 32px;
height: 35px;
float:left;
margin-right:10px;
position: relative;
}
#social li:hover {
cursor: pointer;
opacity: 1.0;
}
#social li:active {
postion: absolute;
top:1px;
}
#social li.facebook {
background-position: -32px 0px;
}
#social li.google {
background-position: -64px 0px;
}
#share_buttons {
width: 138px;
height: 30px;
margin:0 auto;
position:relative;
z-index:1;
}
#twitter_share {
position: absolute;
top: -80px;
left: 20px;
opacity:0;
}
#facebook_share {
position: absolute;
top: -80px;
left:22px;
opacity:0;
}
#google_share {
position: absolute;
top: -80px;
left:37px;
opacity:0;
}
|
html
<ul id="social">
<li class="twitter">Twi</li>
<li class="facebook">FB</li>
<li class="google">G+</li>
</ul>
<div id="share_buttons">
<p id="twitter_share"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</p>
<p id="facebook_share"><a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script></p>
<p id="google_share">
<g:plusone size="medium"></g:plusone>
</p>
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
|
via
Animated Social Icons with Share Buttons
