2016/11/13 【html, css, jQuery】回転するSNSの共有ボタンを作る
最近では、SNSの共有ボタンが付いているサイトはそこら中にあると思いますが、
このサイトにはまだついてなかったのでつけてみました。
今のところ、ウィンドウの横幅が900px以下の場合は表示されないようになっているので
スマホなどで見ている場合は見えないかもしれませんが、
左下に６つのボタンを縦並びで表示させています。
また、マウスポインタを当てるとボタンが回転して文字が出てくるようになってます。
作り方を下にまとめておきます。
目次
1. JavaScriptのライブラリの読み込み(html)
前回のtwitterフォローボタンと同じように動きの部分にはjQueryを使用するのですが、
jQueryでは要素の回転を行うことができません。
そのため、jQueryの他にjquery-animate-css-rotate-scaleという
jQueryで回転や拡大を行うためのライブラリをダウンロードして使います。
jquery-animate-css-rotate-scale
https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
そして、htmlの<head>の中で読み込ませておきます。
<head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script> </head>
jquery-animate-css-rotate-scaleはjQueryを使用しているので、
必ずjQueryの後に読み込ませなければならないことに注意です。
2. SNSボタンの外観(html, css)
SNSボタンの外観は、こちらのサイトを参考にしました。
http://junk-blog.com/round_sns_button/
基本は上のサイトにあるものをそのまま使わせて頂いているのですが、
jquery-animate-css-rotate-scaleではclassの要素を扱うことが出来ないようなので
各ボタンの要素はclassではなくidを使うようにしました。
また、ボタンだけではなくポインタが触れたときに各SNSの名前を表示させるようにするために
SNSの名前用のidを作成し、liの中に新しくspanをつくっておきました。
実際にhtmlの<body>に置くと下のような感じになります。
<body> <div class="sns_manager"> <ul class="circle_group"> <span id="sns_com">Please<br>Share!</span> <li id="sns_feedly"><span id="icon-feedly"></span><a id="Afeedly" href="URL"><span id="c-feedly">feedly</span></li> <li id="sns_facebook"><span id="icon-facebook"></span><a id="Afacebook" href="URL"><span id="c-facebook">facebook</span></li> <li id="sns_twitter"><span id="icon-twitter"></span><a id="Atwitter" href="URL"><span id="c-twitter">twitter</span></li> <li id="sns_hatebu"><span id="icon-hatebu"></span><a id="Ahatebu" href="URL"><span id="c-hatebu">hatena bookmark</span></li> <li id="sns_pocket"><span id="icon-pocket"></span><a id="Apocket" href="URL"><span id="c-pocket">pocket</span></li> <li id="sns_googleplus"><span id="icon-google-plus"></span><a id="Agplus" href="URL"><span id="c-gplus">Google plus</span></li> </ul> </div> </body>
cssは下のようになりました。
.sns_manager{
position:fixed;
left: 10px;
bottom: 5%;
text-align: left;
}
#c-feedly, #c-facebook, #c-twitter, #c-hatebu, #c-pocket, #c-gplus{
position: absolute;
display: none;
width:160px;
top: 5px;
left: 45px;
font-family: 'Itim', cursive;
font-size: 20px;
background-color:white;
color:black;
border-bottom-style: solid;
}
ボタンは常に表示させておきたいので、ボタン全体を管理しているsns_managerクラスのpositionをfixedにしておきました。
また、ボタンの背景、アイコン、当たり判定はそれぞれ別のIDで管理されているので
text-alignをleftにしてどの要素もずれが出ないようにする事が重要です。
SNSの名前の部分はdisplayをnoneにすることで、
ページを開いた直後は文字の部分が見えないようにしています。
要素を見えなくするだけならvisibilityをhiddenにすることでもできますが、
その場合は後述するjQueryのfadeIn()関数を使ったときにも表示されなくなるので
今回はdisplay: none;を使っています。
3. 動きをつける(JavaScript)
ボタンの動きの部分はこうなりました。
$(function(){
var snss = [[$('#Atwitter'), $('#icon-twitter'), $('#sns_twitter'), $('#c-twitter')]];
snss[0][0].hover(function(){
snss[0][1].stop(false,true).animate({rotate:'-=360deg',scale:'1.50'},300);
snss[0][2].stop(false,true).animate({scale:'1.40'},300);
snss[0][3].stop(false,true).fadeIn(300);
},function(){
snss[0][1].stop(false,true).animate({rotate:'+=360deg',scale:'1.0'},300);
snss[0][2].stop(false,true).animate({scale:'1.0'},300);
snss[0][3].stop(false,true).fadeOut(300);
});
});
同じ処理が続くのでここにはtwitterの分だけを載せておきます。<li>(sns_twitter)の要素を拡大することで、
その子の要素であるアイコン(icon-twitter)の部分も同時に拡大されますが
そこからさらにアイコンを拡大しつつ回転させています。
animate()関数の中でrotateを指定することで指定した角度だけ回転させることができますが、
関数が呼び出された瞬間の角度からどれだけ(今回は360°)という風に回転をさせるため
前の回転の途中で次の回転に入ると回転し終わった時の角度がずれてしまいます。
そのため、stop()関数の第二引数をtrueにすることで、前のアニメーションが残っていたら
それを最後まで飛ばすようにしています。
4. それぞれのURL(html, JavaScript)
各SNSのURLに飛ばす部分は下のようになりました。
<script>document.write("<a id=\"Afeedly\" href=\"http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fsssignal.web.fc2.com%2Findex.html\" onclick=\"window.open(this.href, 'Fewindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;\"></a>");</script>
<script>document.write("<a id=\"Afacebook\" href=\"http://www.facebook.com/share.php?u="+window.location.href+"\" onclick=\"window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;\"></a>");</script>
<script>document.write("<a id=\"Atwitter\" href=\"https://twitter.com/intent/tweet?text="+encodeURIComponent(document.title)+"&url="+window.location.href+"&via=mizzsig\"></a>");</script>
<script>document.write("<a id=\"Ahatebu\" href=\"http://b.hatena.ne.jp/entry/"+window.location.href+"\" onclick=\"window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;\"></a>");</script>
<script>document.write("<a id=\"Apocket\" href=\"http://getpocket.com/edit?url="+window.location.href+"&title="+encodeURIComponent(document.title)+"\" onclick=\"window.open(this.href, 'Pwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;\"></a>");</script>
<script>document.write("<a id=\"Agoogleplus\" href=\"https://plus.google.com/share?url="+window.location.href+"\" onclick=\"window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;\"></a>");</script>
共有したいページのURLやタイトルをURLのパラメータに含めて、新しく共有するためのウィンドウを開くようにしています。
このサイトはfc2ホームページの無料サーバーを使っているので
phpやfc2ブログの変数(<%topentry_link>や<%topentry_title>)は使うことが出来ないのですが、
現在のページのURLとタイトルは
JavaScriptのwindow.location.hrefとdocument.titleで取得することが出来るので、
JavaScriptで出力しています。
また、このサイトはタイトルに|(バーティカルバー)を使っていますが、
URLにバーティカルバーを直接含めることはできないので
encodeURIComponent()を使うことでエンコードしています。
5. ソースコード全体・あとがき
今回のソースコードはこちらに置いてあります。
https://github.com/mizzsig/html-tests/tree/master/sns-share-button
今回はこれで終了です。
前回でフォローボタンを右下に置いたのと、
ウィンドウの縦幅を狭めたり、文章の邪魔になるような配置をしたくないなと思って
共有ボタンを左下に置いたのですが、
サイトが賑やかになったような感じで個人的には満足です。
若干五月蠅い気がしないでもないですが、文章を書いている部分があまりにも地味なので
これでバランスが取れていると思い込むことにします！
-
Please
- feedly
- hatena bookmark
- Google plus
Share!
