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

パーツ番号 10-13-01 ・ JavaScript使用

お気に入りハートバウンス

物件カードのハートアイコンをクリックすると赤く染まりながら弾みます。賃貸検索サイトのお気に入り登録ボタンに。

clickjs

プレビュー

ソースコード

HTML

<div class="d10-13-01-card">
          <span class="d10-13-01-photo"></span>
          <button class="d10-13-01-heart" type="button" aria-label="お気に入りに追加">
            <svg viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-10-9.3C.4 8 2 4.2 6 4.2c2 0 3.4 1 4 2 .6-1 2-2 4-2 4 0 5.6 3.8 4 7.5C19.5 16.4 12 21 12 21z"/></svg>
          </button>
          <div class="d10-13-01-body">
            <p class="d10-13-01-price">12.8<span>万円</span></p>
            <p class="d10-13-01-name">サンライズコート 302号室</p>
          </div>
        </div>

CSS

.d10-13-01{padding:16px}
        .d10-13-01-card{position:relative;width:100%;max-width:260px;background:#fff;border:1px solid #eef0f3;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.06)}
        .d10-13-01-photo{display:block;height:110px;background:linear-gradient(135deg,#c9d6e3,#8fa6bd)}
        .d10-13-01-heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);padding:0}
        .d10-13-01-heart svg{width:18px;height:18px;fill:#c3cad1;transition:fill .2s}
        .d10-13-01-heart.is-fav svg{fill:#ef4d6c}
        .d10-13-01-heart.is-bounce{animation:d1431pop .5s cubic-bezier(.34,1.7,.64,1)}
        @keyframes d1431pop{0%{transform:scale(1)}30%{transform:scale(1.4)}55%{transform:scale(.85)}100%{transform:scale(1)}}
        .d10-13-01-body{padding:10px 14px 14px}
        .d10-13-01-price{margin:0;font-size:18px;font-weight:800;color:#1f2a37}
        .d10-13-01-price span{font-size:12px;font-weight:600;margin-left:2px;color:#667}
        .d10-13-01-name{margin:4px 0 0;font-size:12px;color:#667}

JavaScript

(function(){
        var root=document.getElementById('item-10-13-01');if(!root)return;
        var heart=root.querySelector('.d10-13-01-heart');
        heart.addEventListener('click',function(){
          heart.classList.toggle('is-fav');
          heart.classList.remove('is-bounce');
          void heart.offsetWidth;
          heart.classList.add('is-bounce');
        });
      })();

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