From 18234e62ac41d032500b80b36710fd164f80b9ec Mon Sep 17 00:00:00 2001 From: ilyaChuk <86570508+ilyaChuk@users.noreply.github.com> Date: Thu, 29 Feb 2024 14:28:29 +0300 Subject: [PATCH] readme --- README.md | 48 +++++++++++++++++++++++--- index.html | 3 +- index.js => pixel-gradient-worklet.js | 2 +- readme images/largeGrad.webp | Bin 0 -> 8974 bytes 4 files changed, 46 insertions(+), 7 deletions(-) rename index.js => pixel-gradient-worklet.js (98%) create mode 100644 readme images/largeGrad.webp 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 0000000000000000000000000000000000000000..5f5cf3ef14d108819d3a441d168e98f2dc572238 GIT binary patch literal 8974 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%0A#}skY*;_6=A3_f^b=Ip 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 literal 0 HcmV?d00001