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

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

Twitter ロゴ

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

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

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

羽が動くフォローボタン

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

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

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

設置したコード

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

HTML

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

Subscribe

"The path"の更新情報をチェックできます。

Recommend

The Path
Copyright © The Path 2012-2016.