diff --git a/README.md b/README.md index f5a3a8e..369768c 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,51 @@ # Градиент из пикселей с шумом -Это [CSS Paint Worklet](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API/Guide) для создания моего любимого эффекта градиента, состоящего из больших пикселей. И каждый пиксель содержит немного шума. +Это [CSS Paint Worklet](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API/Guide) для создания моего любимого эффекта градиента, состоящего из больших пикселей. И каждый пиксель содержит немного шума. [Тут демо](https://ilyachuk.github.io/pixel-gradient-worklet/). +![Alt text]()
- Примеры + Ещё примеры - - ![Alt text]() - ![Alt text]() - - ![Alt text]() - ![Alt text]()
+ +Важный момент. Это не градиент поверх пикселей. Это градиент **состоящий из** пикселей. Лучше заметно при увеличении: +![Alt text]() + +## Установка +Можно скачать файл модуля `pixel-gradient-worklet.js` и подключать. Или используйте из unpkg. Затем добавить класс к `` чтобы через CSS можно было понимать, установился ли worklet. +```html + +``` +## Использование +Модуль может не подключиться из-за устаревших браузеров – это надо учитывать в CSS и делать 2 вида стилей: +```css +.colorfullBlock{ + background: linear-gradient(#00ff00, #ff0000); +} +html.pixelGradient .colorfullBlock{ + --gradient-start: #00ff00; + --gradient-end: #ff0000; + --square-size: 7; + --noise-intensity: 20; + background: paint('pixelGradient'); +} +``` +Именно в таком порядке. Снача дефолтные, потом в случае если `` имеет `.pixelGradien`. + +### Параметры +- Цвета должны быть валидными hex. +- `--gradient-start: #00ff00;` – Первый цвет +- `--gradient-end: #ff0000;` – Второй цвет +-   +- `--square-size: 7;` – Размер пикселей (квадратиков). Чем меньше размер и чем больше размер блока, тем больше нагрузка при перерисовках. +- `--noise-intensity: 20;` – Сила шума. Для одного и того же визуального эффекта шума на разных цветах нужно разное значение. Около красного, зелёного или синего нужно большее значение `--noise-intensity`. +- `--gradient-angle` – Угол направления градиента. +- `--seed` – Сид для шума. По умолчанию всегда 12345. diff --git a/index.html b/index.html index bbd6933..7477426 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ @@ -66,7 +66,6 @@

Менять размер за правый нижний угол

--gradient-angle: 105; --square-size: 7; --noise-intensity: 21; - --noise-intensity: 15; width: 30rem; height: 30rem; border-radius: 1rem; diff --git a/index.js b/pixel-gradient-worklet.js similarity index 98% rename from index.js rename to pixel-gradient-worklet.js index 0276081..ab364cb 100644 --- a/index.js +++ b/pixel-gradient-worklet.js @@ -86,4 +86,4 @@ class GradientSquares { } } -registerPaint('gradientSquares', GradientSquares); \ No newline at end of file +registerPaint('pixelGradient', GradientSquares); \ No newline at end of file diff --git a/readme images/largeGrad.webp b/readme images/largeGrad.webp new file mode 100644 index 0000000..5f5cf3e Binary files /dev/null and b/readme images/largeGrad.webp differ