Opening Ticket — 開幕へ

Source Code

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

<button aria-label="イベントの開幕、ページの先頭へ戻る" class="btt-control btt-2092 btt-hidden" data-btt="" type="button"><span class="ticket-spine">ENTRY <span>2026</span></span><span class="ticket-body"><span class="ticket-label">FIELD NOTES · FEST</span><b>BACK TO<br/>OPENING</b><small>RETURN TO THE TOP</small><span aria-hidden="true" class="ticket-stamp">RE</span></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-2092{position:fixed;right:clamp(15px,3vw,43px);bottom:25px;z-index:40;width:222px;height:118px;border:0;background:transparent;color:#2a1b29;display:flex;text-align:left;padding:0;opacity:0;transform:translateY(20px) rotate(-3deg);transition:opacity .3s,transform .3s,visibility .3s}.btt-2092.btt-visible{opacity:1;transform:rotate(-3deg)}.ticket-spine{width:47px;display:flex;justify-content:space-between;align-items:center;flex-direction:column;writing-mode:vertical-rl;font:900 11px/1 Arial;letter-spacing:.15em;padding:14px 0;background:#efb65e;border-radius:8px 0 0 8px;border-right:2px dashed #a67a5e}.ticket-spine span{font-size:8px}.ticket-body{flex:1;position:relative;display:flex;flex-direction:column;align-items:start;justify-content:center;padding:12px 12px;background:#fff2d7;border-radius:0 8px 8px 0;box-shadow:0 16px 27px #0005;clip-path:polygon(0 0,100% 0,100% 40%,94% 50%,100% 60%,100% 100%,0 100%)}.ticket-label{font:800 8px Arial;letter-spacing:.15em;color:#8d5d51}.ticket-body b{font:900 19px/.97 Arial;letter-spacing:-.03em;margin:5px 0;color:#322038}.ticket-body small{font:800 9px Arial;letter-spacing:.08em}.ticket-stamp{position:absolute;right:13px;bottom:9px;display:grid;place-items:center;width:27px;height:27px;border:2px solid #ad6960;border-radius:50%;color:#ad6960;font:800 12px Arial;transform:rotate(-15deg);animation:stampFlash 4s ease-in-out infinite}.btt-2092:hover{transform:rotate(0deg) translateY(-7px)}.btt-2092.is-going .ticket-stamp{background:#ad6960;color:white}@keyframes stampFlash{0%,88%,100%{opacity:.55}93%{opacity:1}}@media(max-width:600px){.btt-2092{right:13px;bottom:17px;width:182px;height:101px}.ticket-spine{width:36px;font-size:9px}.ticket-body b{font-size:16px}.ticket-label{font-size:7px}.ticket-body small{font-size:8px}.ticket-stamp{right:9px;bottom:7px;width:23px;height:23px;font-size:10px}}

(()=>{'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]');}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設定にも配慮しています。