Обёртки для скриншотов
Модуль для скриншотов десктопной версии
+browserScreenshot({
src: 'image.png',
address: 'test.ru',
})Модификаторы
mod: 'noBorder' — удаляет рамку;
mod: 'headOverlay' — накладывает шапку браузера поверх скриншота;
mod: 'headBorder' — добавляет снизу шапки линейку, совпадающую по параметрам с внешней рамкой браузера;
mod: 'shadow' — добавляет тень.
Цвета
‑‑browserColor — цвет шапки браузера;
‑‑browserAddressColor — цвет текста в шапке;
‑‑browserDotsColor — цвет точек в шапке;
‑‑browserBorderColor — цвет рамки.
Чтобы переопределить цвет для отдельной обёртки, а не всей страницы можно использовать style. Например:
style: '--browserColor: #fff; --browserDotsColor: #000; --browserAddressColor: #6A36B2; --browserDotsColor: #6A36B2;'Дефолтный цвет рамки
Шапка и рамка дефолтного цвета
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки
--browserColor: #6A36B2;
--browserAddressColor: #fff;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки в цвет скрина
--browserColor: #fff;
--browserDotsColor: #000;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки + рамка под шапкой
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder',
})Шапка накладывается на скриншот
--browserAddressColor: #fff;
+browserScreenshot({
src: 'woman.png',
address: 'test.ru',
mod: 'headBorder',
})Рамка кастомного цвета
Шапка дефолтного цвета + рамка в цвет шапки
--browserBorderColor: #ebebeb;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки + рамка в цвет шапки
--browserColor: #6A36B2;
--browserBorderColor: #6A36B2;
--browserAddressColor: #fff;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки в цвет скрина + рамка в цвет шапки
--browserColor: #fff;
--browserBorderColor: #fff;
--browserDotsColor: #000;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
})Кастомный цвет шапки + кастомный цвет рамки + рамка под шапкой
--browserBorderColor: #6A36B2;
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder',
})Шапка накладывается на скриншот + кастомный цвет рамки
--browserBorderColor: #000;
--browserDotsColor: #000;
+browserScreenshot({
src: 'man.png',
address: 'gamecomingsoon.com',
mod: 'headOverlay',
})Без рамки
Шапка дефолтного цвета
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder',
})Кастомный цвет шапки
--browserColor: #A32EFF;
--browserAddressColor: #fff;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder',
})Кастомный цвет шапки в цвет скрина
--browserColor: #fff;
--browserDotsColor: #6A36B2;
--browserAddressColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder',
})Кастомный цвет шапки + рамка под шапкой (не отображается, так как стоит noBorder)
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder noBorder',
})Шапка накладывается на скриншот
--browserAddressColor: #fff;
+browserScreenshot({
src: 'game.png',
address: 'test.ru',
mod: 'headBorder noBorder',
})Дефолтный цвет рамки с тенью
Шапка и рамка дефолтного цвета
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки
--browserColor: #6A36B2;
--browserAddressColor: #fff;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки в цвет скрина
--browserColor: #fff;
--browserDotsColor: #6A36B2;
--browserAddressColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки + рамка под шапкой
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder shadow',
})Шапка накладывается на скриншот
--browserAddressColor: #fff;
+browserScreenshot({
src: 'woman.png',
address: 'test.ru',
mod: 'headOverlay shadow',
})Рамка кастомного цвета с тенью
Шапка дефолтного цвета + рамка в цвет шапки
--browserBorderColor: #ebebeb;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки + рамка в цвет шапки
--browserColor: #000;
--browserBorderColor: #000;
--browserAddressColor: #fff;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки в цвет скрина + рамка в цвет шапки
--browserColor: #fff;
--browserBorderColor: #fff;
--browserDotsColor: #000;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'shadow',
})Кастомный цвет шапки + кастомный цвет рамки + рамка под шапкой
--browserBorderColor: #6A36B2;
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder shadow',
})Шапка накладывается на скриншот + кастомный цвет рамки
--browserBorderColor: #000;
--browserDotsColor: #000;
+browserScreenshot({
src: 'man.png',
address: 'gamecomingsoon.com',
mod: 'headOverlay shadow',
})Без рамки с тенью
Шапка дефолтного цвета
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder shadow',
})Кастомный цвет шапки
--browserColor: #000;
--browserAddressColor: #fff;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder shadow',
})Кастомный цвет шапки в цвет скрина
--browserColor: #fff;
--browserDotsColor: #000;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'noBorder shadow',
})Кастомный цвет шапки + рамка под шапкой (не отображается, так как стоит noBorder)
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
+browserScreenshot({
src: 'koftyonyshi.png',
address: 'test.ru',
mod: 'headBorder noBorder shadow',
})Шапка накладывается на скриншот
--browserAddressColor: #fff;
+browserScreenshot({
src: 'game.png',
address: 'test.ru',
mod: 'headOverlay noBorder shadow',
})Разные размеры с дефолтным состоянием
lessThanTextWidth
textWidth
На всю страницу
Два скриншота рядом
Два скриншота с тенью рядом
Обратная совместимость
1. +browserScreenshot без настроек:
Японский язык без страха
Было
Стало
2. +browser без настроек:
полка Левелвана
Было
Стало
5. Браузер перекрашивается и исчезает адресная строка в шапке:
кофтёныши
Было
Стало
4. Браузер перекрашивается, адресная строка была спрятана:
высшая школа главбуха
Было
Стало
5. Паралаксед
Страница товара встречает клёвыми фотками и объяснением, что такое кофтёныш:
6. Браузер с классом width50:
кабинет школы
Было
Стало
Модуль для скриншотов мобильной версии
+mobileScreenshot({ src: 'image_mobile.png' })Модификаторы
mod: 'noBorder' — удаляет рамку;
mod: 'shadow' — добавляет тень;
mod: 'parallaxed' — паралаксит скриншот внутри обёртки при прокрутке страницы.
Цвета
‑‑browserBorderColor — цвет рамки.
Чтобы переопределить цвет для отдельной обёртки, а не всей страницы можно использовать style. Например:
style: '--browserBorderColor: #6A36B2;'Варианты рамки
Рамка дефолтного цвета
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
})Рамка кастомного цвета
--browserBorderColor: #6A36B2;
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
})Без рамки
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
mod: 'noBorder',
})С тенью
Рамка дефолтного цвета с тенью
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
mod: 'shadow',
})Рамка кастомного цвета с тенью
--browserBorderColor: #6A36B2;
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
mod: 'shadow',
})Без рамки с тенью
+mobileScreenshot({
src: 'koftyonyshi_mobile.png',
mod: 'noBorder shadow',
})С анимацией
Перед использованием проверить, что нет глюков в Сафари.
Разной высоты
C паралаксом
Скриншот прокручивается внутри обёртки
+mobileScreenshot({
src: 'dark-mobile.png',
mod: 'parallaxed',
frameHeight: '208%',
})