スクロール＋マウス連動UIの作り方【スマホでも破綻しない設計】

<div class="simple-area">
  <div class="simple-box">Scroll</div>
</div>

.simple-area {
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.simple-box {
  width: 120px;
  height: 120px;
  background: #4cc9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b1720;
  font-weight: bold;
  border-radius: 12px;
}

const box = document.querySelector(".simple-box");

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;

  // 少しだけ動かす
  const moveY = scrollY * 0.2;

  box.style.transform = `translateY(${moveY}px)`;
});

const box = document.querySelector(".simple-box");

const hasMouse = window.matchMedia("(pointer: fine)").matches;

let mouseX = 0;

if (hasMouse) {
  window.addEventListener("mousemove", (e) => {
    const center = window.innerWidth / 2;
    mouseX = (e.clientX - center) * 0.05;
  });
}

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;

  const moveY = scrollY * 0.2;

  box.style.transform = `translate(${mouseX}px, ${moveY}px)`;
});

<section class="hero">
  <div class="hero__bg hero__bg--1" data-depth="12"></div>
  <div class="hero__bg hero__bg--2" data-depth="20"></div>

  <div class="hero__content" data-depth="8">
    <p class="eyebrow">Scroll + Mouse Interaction</p>
    <h1>Scroll first.<br>Mouse second.</h1>
    <p class="lead">
      スクロールを主役にして、PCではマウスで少しだけ奥行きを足すUIです。
    </p>
  </div>

  <div class="hero__card hero__card--left" data-depth="16">
    <span>Layer A</span>
  </div>

  <div class="hero__card hero__card--right" data-depth="24">
    <span>Layer B</span>
  </div>
</section>

<section class="dummy">
  <div class="dummy__inner">
    <h2>Scroll down</h2>
    <p>
      下へスクロールすると全体がゆるく動き、PCではマウス位置でも少しだけ補正されます。
      スマホではスクロールだけで自然に成立します。
    </p>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #e8eef2;
  background:
    radial-gradient(circle at top, #173042 0%, #0b1720 45%, #050a0e 100%);
  overflow-x: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 24px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__content,
.hero__card,
.hero__bg {
  will-change: transform;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.lead {
  margin: 20px auto 0;
  max-width: 560px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.8;
  opacity: 0.82;
}

.hero__bg {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.55;
  z-index: 1;
}

.hero__bg--1 {
  width: 320px;
  height: 320px;
  left: 8%;
  top: 16%;
  background: linear-gradient(135deg, #66d1ff, #246bff);
}

.hero__bg--2 {
  width: 260px;
  height: 260px;
  right: 10%;
  bottom: 14%;
  background: linear-gradient(135deg, #7cf0c7, #247f8e);
}

.hero__card {
  position: absolute;
  width: 180px;
  height: 120px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.hero__card--left {
  left: 10%;
  bottom: 18%;
  transform: rotate(-8deg);
}

.hero__card--right {
  right: 12%;
  top: 20%;
  transform: rotate(8deg);
}

.hero__card span {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.dummy {
  min-height: 100vh;
  padding: 120px 24px;
}

.dummy__inner {
  max-width: 760px;
  margin: 0 auto;
}

.dummy h2 {
  font-size: clamp(28px, 5vw, 48px);
  margin: 0 0 20px;
}

.dummy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  opacity: 0.82;
}

@media (max-width: 768px) {
  .hero {
    padding-top: 96px;
  }

  .hero__card {
    width: 140px;
    height: 92px;
  }

  .hero__card--left {
    left: 4%;
    bottom: 14%;
  }

  .hero__card--right {
    right: 4%;
    top: 16%;
  }

  .hero__bg--1 {
    width: 220px;
    height: 220px;
  }

  .hero__bg--2 {
    width: 180px;
    height: 180px;
  }
}

const layers = document.querySelectorAll("[data-depth]");
const hasFinePointer = window.matchMedia("(pointer: fine)").matches;

let mouseX = 0;
let mouseY = 0;
let currentMouseX = 0;
let currentMouseY = 0;

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

function updateMousePosition(x, y) {
  const nx = (x / window.innerWidth) * 2 - 1;
  const ny = (y / window.innerHeight) * 2 - 1;

  mouseX = clamp(nx, -1, 1);
  mouseY = clamp(ny, -1, 1);
}

if (hasFinePointer) {
  window.addEventListener("mousemove", (e) => {
    updateMousePosition(e.clientX, e.clientY);
  });
}

function animate() {
  const scrollY = window.scrollY;
  const scrollProgress = clamp(scrollY / window.innerHeight, 0, 1);

  currentMouseX += (mouseX - currentMouseX) * 0.08;
  currentMouseY += (mouseY - currentMouseY) * 0.08;

  layers.forEach((layer) => {
    const depth = Number(layer.dataset.depth);

    const scrollOffsetY = scrollProgress * depth * -2.2;
    const mouseOffsetX = hasFinePointer ? currentMouseX * depth : 0;
    const mouseOffsetY = hasFinePointer ? currentMouseY * depth : 0;

    let rotate = "";

    if (layer.classList.contains("hero__card--left")) {
      rotate = " rotate(-8deg)";
    }

    if (layer.classList.contains("hero__card--right")) {
      rotate = " rotate(8deg)";
    }

    layer.style.transform =
      `translate3d(${mouseOffsetX}px, ${scrollOffsetY + mouseOffsetY}px, 0)` + rotate;
  });

  requestAnimationFrame(animate);
}

animate();