AI向け説明 AI Description

`V-005` は2枚の画像を重ね、上層のコンテナ幅（または clip-path）をマウス位置に応じて変更することで比較機能を実現します。画像のズレを防ぐため、内側の画像幅をコンテナ幅と同じに固定する必要があります。

`V-005` overlays two images and adjusts the width (or clip-path) of the top layer based on mouse position. Inner image width must be fixed to container width to prevent scaling issues during resize.

調整可能パラメータ Adjustable Parameters

• --handle-bg — ハンドルの背景色Handle background color
• --divider-color — 境界線の色Divider line color

実装 Implementation

HTML + CSS + JS

<div class="compare">
  <img src="after.jpg" class="bg" />
  <div class="overlay"><img src="before.jpg" /></div>
  <div class="handle"></div>
</div>

<script>
const container = document.querySelector('.compare');
const overlay = document.querySelector('.overlay');
container.addEventListener('mousemove', e => {
  const rect = container.getBoundingClientRect();
  const x = e.clientX - rect.left;
  overlay.style.width = `${x}px`;
  document.querySelector('.handle').style.left = `${x}px`;
});
</script>

React (JSX + CSS)

// react/V-005.jsx
import { useState, useRef } from 'react';
import './V-005.css';

export default function BeforeAfter({ before, after }) {
  const [width, setWidth] = useState(50);
  const containerRef = useRef(null);

  const handleMove = (e) => {
    const rect = containerRef.current.getBoundingClientRect();
    const x = (e.nativeEvent.clientX || e.nativeEvent.touches[0].clientX) - rect.left;
    let percent = (x / rect.width) * 100;
    if (percent < 0) percent = 0;
    if (percent > 100) percent = 100;
    setWidth(percent);
  };

  return (
    <div className="compare-container" ref={containerRef}
      onMouseMove={handleMove} onTouchMove={handleMove}>
      <img src={after} className="compare-img" alt="After" />
      <div className="compare-overlay" style={{ width: `${width}%` }}>
        <img src={before} alt="Before"
          style={{ width: containerRef.current ? containerRef.current.offsetWidth : '100%' }} />
      </div>
      <div className="compare-handle" style={{ left: `${width}%` }}>
        <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path d="M8 12h8m-8 0l4-4m-4 4l4 4" /></svg>
      </div>
    </div>
  );
}

/* react/V-005.css */
/* V-005: React styles */
.compare-container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  cursor: col-resize;
  aspect-ratio: 16/9;
}

.compare-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.compare-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-right: 2px solid #fff;
}

.compare-overlay img {
  width: 600px;
  height: 100%;
  object-fit: cover;
}

.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
  pointer-events: none;
}