Look One Tag — LOOK 01

Source Code

必要なコードをコピーして実装に利用できます。

<button aria-label="最初のLOOK、ページの先頭へ戻る" class="btt-control btt-2089 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="look-notch"></span><span class="look-line">COLLECTION 2026</span><strong>LOOK <em>01</em></strong><span class="look-return">BACK TO FIRST LOOK</span><span class="look-current" data-state="">CURRENT LOOK 02</span></button>

 .btt-control{box-sizing:border-box;appearance:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.btt-control:focus-visible{outline:3px solid #e6a643;outline-offset:5px}.btt-hidden{opacity:0;visibility:hidden;pointer-events:none}.btt-visible{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){.btt-control,.btt-control *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
 .btt-2089{position:fixed;left:clamp(15px,2vw,38px);top:50%;z-index:40;width:102px;min-height:263px;transform:translate(-18px,-50%);opacity:0;visibility:hidden;border:0;border-left:2px solid #22292b;background:rgba(249,249,244,.95);color:#202727;box-shadow:9px 15px 25px #2222;padding:15px 9px;display:flex;flex-direction:column;align-items:start;text-align:left;gap:18px;transition:opacity .3s,transform .3s,visibility .3s,width .3s}.btt-2089.btt-visible{opacity:1;transform:translate(0,-50%)}.look-notch{position:absolute;right:0;top:0;width:23px;height:23px;clip-path:polygon(0 0,100% 100%,100% 0);background:#c3ab86}.look-line{font:700 9px/1.4 Arial;letter-spacing:.13em;writing-mode:vertical-rl;height:84px}.btt-2089 strong{font:700 18px/1 Arial;letter-spacing:.04em;white-space:nowrap}.btt-2089 em{font:italic 22px Georgia,serif}.look-return{font:800 10px/1.3 Arial;letter-spacing:.09em;max-width:83px}.look-current{font:700 9px/1.3 Arial;letter-spacing:.02em;max-width:87px;border-top:1px solid #bbb;padding-top:8px}.btt-2089:hover{width:125px;box-shadow:15px 20px 30px #2223}.btt-2089.is-going strong{color:#b68058}@media(max-width:650px){.btt-2089{top:auto;left:10px;bottom:16px;min-height:114px;width:167px;transform:translateY(18px);padding:12px;gap:7px;border-left-width:3px}.btt-2089.btt-visible{transform:none}.look-line{height:auto;writing-mode:horizontal-tb}.look-return,.look-current{max-width:none}.btt-2089:hover{width:174px}}
.btt-2089.btt-visible{visibility:visible;pointer-events:auto}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const footerOnly=false;const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const p=Math.max(0,Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight)));if(!footerOnly){const shown=window.scrollY>170;el.classList.toggle('btt-visible',shown);el.classList.toggle('btt-hidden',!shown);el.tabIndex=shown?0:-1;el.setAttribute('aria-hidden',String(!shown));}el.style.setProperty('--progress',p.toFixed(3));const field=el.querySelector('[data-state]');if(field)field.textContent='CURRENT LOOK '+String(Math.max(2,Math.min(6,Math.floor(p*6)+1))).padStart(2,'0');}function onScroll(){if(!raf)raf=requestAnimationFrame(update)}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onScroll,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});window.setTimeout(()=>el.classList.remove('is-going'),650)});update()})();

How to Use

HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。

Use Case

ファッション・ルックブック

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タップ位置・余白・文字の収まりに注意。

Browser：Chrome/Edge/Firefox/Safariの現行バージョンを想定。

Reduced Motion：動きを抑制するOS設定にも配慮しています。