Floating UI
Patterns
Three floating panel techniques used in Japanese service sites, rebuilt with modern CSS. Scroll down to see them all in action.
Pattern 1 — Dismissible Widget
That chat bubble in the bottom-right corner. It slides in on load and the ✕ button closes it permanently — with zero JavaScript. Click it to dismiss.
Pattern 2 — Sticky Sidebar
The sidebar on the right follows you as you scroll. It uses position: sticky — a single CSS property that replaced 30 lines of jQuery.
Pattern 3 — Scroll-Triggered Bar
The purple bar at the bottom slides up after you scroll 300px. JS only adds or removes one CSS class — the animation itself is pure CSS transition.
CSS does: transform: translateY(100%) → translateY(0)
Why modern CSS wins here
The AU Hikari page used floats, jQuery, and checkbox hacks for different things. Today:
🔲 CSS Grid replaces float columns
📌 position: sticky replaces jQuery scroll-follow
🎞️ CSS transition replaces jQuery .animate()
✅ Checkbox hack still works — and it's clever!