usePixel — это лёгкий (менее 2 КБ), JavaScript-инструмент для наложения эталонного изображения (макета) на всю длину веб-страницы. Идеально подходит для верстальщиков, фронтенд-разработчиков и QA-инженеров, которым нужно визуально сверять реализацию с дизайном в реальном времени — прямо в браузере.
- 🖼️ Накладывает изображение на всю высоту документа, а не только на видимую область.
- ⌨️ Управление через горячие клавиши:
Ctrl + Z— переключить оверлей поверх/под контентом.Shift + Z— скрыть/показать оверлей (плавная прозрачность).Ctrl + Alt— полностью показать/скрыть элемент (display: none/block).
- 🔧 Полностью настраиваемые клавиши под вашу раскладку или предпочтения.
- 🛡️ Не мешает взаимодействию:
pointer-events: none— клики и скролл работают сквозь оверлей. - 🧼 Чистый DOM: использует кастомный тег
<pixeldiv>для изоляции от стилей проекта. - 📏 Автоматически определяет высоту документа — работает даже на динамических и длинных страницах.
- Подключите скрипт в конце
<body>или через DevTools:
<script src="usepixel.js"></script> usePixel({ image_url: 'https://example.com/design.jpg', opacity: 0.4 });
- Используйте горячие клавиши для управления!
// Макет с прозрачностью 30%, управление через X usePixel({ image_url: '/mockup-desktop.png', opacity: 0.3, key: 'KeyX', keyCtrl: 'ControlRight' });
The MIT License