TOP > Web > カスタマイズ > This Entry
Web

クリックすると羽がパタパタするTwitterフォローボタンの設置方法

Twitter ロゴ

Twitterはブログをやっている方は更新通知を流すためにほとんどの方がアカウントを持っている。フォロワーを増やすためにもブログにフォローボタンを設置している方も多い。

最近、少し変わった面白いフォローボタンを発見したのでご紹介。

クリックするとアイコンの羽がパタパタする

羽が動くフォローボタン

少しわかりにくいが、右の写真は羽が動いているところ。アイコンをクリック(スマホなので正確にはタップ)すると動作する。この動きが可愛らしくてたまらない。

こちらのサイトで紹介されていたものをそのまま使える。

See the Pen Flying Twitter Bird Follow Button by Pankaj Parashar (@pankajparashar) on CodePen.

設置したコード

自分が設置したのはこちら。

HTML

<div class="follow-wrapper">
  <div class="follow-button">
    <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-follow-button twitter-follow-button-rendered" title="Twitter Follow Button" src="http://platform.twitter.com/widgets/follow_button.5c39137502ea1894df4434ae5ed041c5.en.html#dnt=false&id=twitter-widget-0&lang=en&screen_name=t_matumoto0215&show_count=false&show_screen_name=true&size=m&time=1493189052922" style="position: static; visibility: visible; width: 157px; height: 20px;" data-screen-name="t_matumoto0215"></iframe>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div>
</div>

CSS


.follow-wrapper {
  height: 44px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
 
.follow-button {
    background-image: url(http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite-small.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer;
    display: block;
    padding: 7px 0 7px 40px;
    position: absolute;
    right: -168px;
    top: 5px;
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    width: 168px;
}
 
.follow-button:hover {-webkit-animation: fly 0.2s steps(4) 0 10;
    -moz-animation: fly 0.2s steps(4) 0 10;
    animation: fly 0.2s steps(4) 0 10;
    right: 0;
}
 
@-webkit-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
 
@-moz-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
 
@keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
 
.hover-me {
  background-image: url(http://minimalmonkey.com/lab/css3-animations/hoverfancy.png);
  height: 184px;
  position: absolute;
  right: 5px;
  top: -5px;
  width: 274px;
}

Twitterのアカウントは自分のものに変更してどうぞ。

あとがき

面白いアイコンだが、残念なところがChromeでは動作しないところ。そこで今回はスマホの方に設置することにした。

このサイトにはほかにも色々な面白いコードが紹介されていてなかなかおもしろい。

Click to Copy Title & URL
最新記事をチェック
follow us in feedly

Recommend

スマホ表示に切り換える
The Path
Copyright © The Path 2012-2017.