Bloggerデザイン : ポップアウトSNSフォローボタン

1. デザインのタイプ

【放射状ポップアウト・プロフィール・ウィジェット】
一点集中から展開するソーシャルアイコン・アニメーション。丸いプロフィール画像の中心からアイコンがスッと飛び出し、整列する躍動感のあるインターフェースを提供します。

2. デザインの特徴

• 一点起点アニメーション
  全てのSNSアイコンがプロフィール画像の中央（背面）から、放射状にスッと飛び出す躍動感のある演出。
• CSS計算による安定性
  Bloggerの多様なレイアウト環境でも崩れず、滑らかに動作するCSS transform主体の設計。
• セパレート・ホバーエフェクト
  移動アニメーションとホバー挙動を分離。マウスを乗せた際の「ビクビク」した震えを完全に解消。

3. 紹介コード

HTML・CSS JavaScript

<div class="popout-profile-widget">
  <div class="me-outer">
    <img class="me" src="プロフィール画像" alt="Profile" />

    <div class="social-icons">
      <a href="#" class="pop-icon" id="icon-1"><i class="icon-twitter"></i></a>
      <a href="#" class="pop-icon" id="icon-2"><i class="icon-github"></i></a>
      <a href="#" class="pop-icon" id="icon-3"><i class="icon-stackexchange"></i></a>
      <a href="#" class="pop-icon" id="icon-4"><i class="icon-linkedin-sign"></i></a>
      <a href="#" class="pop-icon" id="icon-5"><i class="icon-code"></i></a>
      <a href="#" class="pop-icon" id="icon-6"><i class="icon-google-plus-sign"></i></a>
      <a href="#" class="pop-icon" id="icon-7"><i class="icon-envelope"></i></a>
    </div>
  </div>
</div>
<style>
.popout-profile-widget {
    text-align: center;
    padding: 50px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
}

.me-outer {
    position: relative;
    display: inline-block;
}

.me {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    z-index: 10;
    background: #eee;
}

.social-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    z-index: 1;
}

.pop-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2.5em;
    color: #555;
    text-decoration: none;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    margin-top: -0.5em;
    margin-left: -0.5em;
    pointer-events: none;
}

.pop-icon.active {
    opacity: 1;
    pointer-events: auto;
}

#icon-1.active { transform: translate(-180px, 110px); }
#icon-2.active { transform: translate(-120px, 110px); }
#icon-3.active { transform: translate(-60px, 110px); }
#icon-4.active { transform: translate(0px, 110px); }
#icon-5.active { transform: translate(60px, 110px); }
#icon-6.active { transform: translate(120px, 110px); }
#icon-7.active { transform: translate(180px, 110px); }

.pop-icon i {
    display: inline-block;
    transition: transform 0.2s ease, color 0.3s ease;
}

.pop-icon:hover i {
    transform: scale(1.2) translateY(-5px);
}

#icon-1:hover i { color: #77DDF6; }
#icon-2:hover i { color: black; }
#icon-3:hover i { color: #ED780E; }
#icon-4:hover i { color: #0177B5; }
#icon-5:hover i { color: #29A329; }
#icon-6:hover i { color: #D43402; }
#icon-7:hover i { color: #F7B401; }
</style>
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
    setTimeout(function() {
        $('.pop-icon').each(function(i) {
            var $el = $(this);
            setTimeout(function() {
                $el.addClass('active');
            }, i * 80);
        });
    }, 500);
});
// ]]>
</script>