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

非対称伸縮スプリットパネル

縦に並んだ複数パネルのうちホバーした1枚だけが横に大きく伸びるアコーディオン型分割レイアウト。ポートフォリオや事業紹介の一覧に使えます。

hoverjs

プレビュー

ソースコード

HTML

<div class="d01-13-04-wrap">
          <div class="d01-13-04-panel" style="background:linear-gradient(160deg,#f43f5e,#be123c)"><span>01</span></div>
          <div class="d01-13-04-panel" style="background:linear-gradient(160deg,#f97316,#c2410c)"><span>02</span></div>
          <div class="d01-13-04-panel" style="background:linear-gradient(160deg,#eab308,#a16207)"><span>03</span></div>
          <div class="d01-13-04-panel" style="background:linear-gradient(160deg,#22c55e,#15803d)"><span>04</span></div>
        </div>

CSS

.prev.d01-13-04{padding:0}
        .d01-13-04-wrap{display:flex;width:100%;height:230px}
        .d01-13-04-panel{flex:1;transition:flex .45s cubic-bezier(.2,.7,.3,1);display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;box-sizing:border-box;cursor:pointer}
        .d01-13-04-panel span{color:#fff;font-weight:800;font-size:20px}
        .d01-13-04-panel.is-active{flex:3.2}

JavaScript

(function(){
        var root=document.getElementById('item-01-13-04');if(!root)return;
        var wrap=root.querySelector('.d01-13-04-wrap');
        var panels=root.querySelectorAll('.d01-13-04-panel');
        panels.forEach(function(p){
          p.addEventListener('mouseenter',function(){
            panels.forEach(function(x){x.classList.remove('is-active');});
            p.classList.add('is-active');
          });
        });
        wrap.addEventListener('mouseleave',function(){
          panels.forEach(function(x){x.classList.remove('is-active');});
        });
      })();

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