← 動的パーツギャラリーへ戻る

パーツ番号 10-03-04 ・ JavaScript使用

リアクション(いいね等)

吹き出しにホバーすると絵文字リアクションバーが出現、選ぶとバッジとして付く（ホバー・クリック動作あり）。WordPressのコメント演出に。

chatscrollhoverclickjs

プレビュー

ソースコード

HTML

<div class="d10-03-04-chat">
          <div class="d10-03-04-msg" tabindex="0">
            <div class="d10-03-04-bub">この写真すごくよく撮れてるね！</div>
            <div class="d10-03-04-bar">
              <button class="d10-03-04-emo" data-e="👍">👍</button>
              <button class="d10-03-04-emo" data-e="❤️">❤️</button>
              <button class="d10-03-04-emo" data-e="😂">😂</button>
              <button class="d10-03-04-emo" data-e="🎉">🎉</button>
            </div>
            <span class="d10-03-04-picked" id="d10-03-04-picked"></span>
          </div>
          <p class="d10-03-04-hint">吹き出しにホバー / タップして選択</p>
        </div>

CSS

.d10-03-04 .d10-03-04-chat{width:240px;font-size:12px}
        .d10-03-04 .d10-03-04-msg{position:relative;display:inline-block;padding-bottom:4px}
        .d10-03-04 .d10-03-04-bub{max-width:200px;padding:9px 12px;border-radius:14px;background:#eef1f5;color:#333;line-height:1.5;border-bottom-left-radius:4px}
        .d10-03-04 .d10-03-04-bar{position:absolute;top:-16px;left:8px;display:flex;gap:2px;padding:3px 5px;background:#fff;border:1px solid #e6e9ef;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);opacity:0;transform:translateY(6px) scale(.9);pointer-events:none;transition:.2s}
        .d10-03-04 .d10-03-04-msg:hover .d10-03-04-bar,.d10-03-04 .d10-03-04-msg:focus-within .d10-03-04-bar{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
        .d10-03-04 .d10-03-04-emo{border:none;background:none;font-size:15px;cursor:pointer;padding:2px 3px;border-radius:8px;transition:transform .12s}
        .d10-03-04 .d10-03-04-emo:hover{transform:scale(1.35)}
        .d10-03-04 .d10-03-04-picked{position:absolute;bottom:-10px;right:-6px;background:#fff;border:1px solid #e6e9ef;border-radius:12px;padding:1px 6px;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.08);opacity:0;transform:scale(.5);transition:.2s}
        .d10-03-04 .d10-03-04-picked.on{opacity:1;transform:scale(1)}
        .d10-03-04 .d10-03-04-hint{margin-top:14px;color:#9aa4b2;font-size:11px}

JavaScript

(function(){
        var scope=document.getElementById('item-10-03-04'),out=document.getElementById('d10-03-04-picked');
        scope.querySelectorAll('.d10-03-04-emo').forEach(function(b){
          b.addEventListener('click',function(){
            out.textContent=b.dataset.e+' 1';out.classList.remove('on');void out.offsetWidth;out.classList.add('on');
          });
        });
      })();

クラス名 .d10-03-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。