Перейти к содержимому

CoreImageCompare

Примеры использования и документация.

Сравнение «до/после» на одной картинке: пользователь тянет разделитель и сам видит разницу — результат ретуши, ремонта, смены темы. Используйте в кейсах и портфолио, где две версии нужно показывать синхронно в одной рамке.

Технические детали: слои — NuxtImg, «после» базовый (задаёт высоту контейнера), «до» обрезается через clip-path inset по позиции разделителя. Drag мышью и тачем прямо по изображению — pointer events + pointer capture на figure, вертикальный скролл страницы не ломается; клавиатура — скрытый нативный range (0–100) с aria-label из label, у ручки-разделителя шевроны. Позиция — v-model в процентах 0–100; без v-model — внутреннее состояние (uncontrolled) со стартом initialValue (по умолчанию 50). Alt-тексты настраиваются (beforeAlt/afterAlt, по умолчанию «До»/«После»).

Ночь
День

Тяните разделитель или используйте ←/→ после клика; позиция: 50%.