readme

ilyaChuk · Feb 29, 2024 · 18234e6 · 18234e6
1 parent 72c794a
commit 18234e6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git 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](<readme images/grad3.webp>)
 <details>
-  <summary>Примеры</summary>
+  <summary>Ещё примеры</summary>
 
-
   - ![Alt text](<readme images/ngrad1.webp>)
   - ![Alt text](<readme images/ngrad2.webp>)
-  - ![Alt text](<readme images/grad3.webp>)
   - ![Alt text](<readme images/ngrad4.webp>)
 </details>
+
+Важный момент. Это не градиент поверх пикселей. Это градиент **состоящий из** пикселей. Лучше заметно при увеличении:
+![Alt text](<readme images/largeGrad.webp>)
+
+## Установка
+Можно скачать файл модуля `pixel-gradient-worklet.js` и подключать. Или используйте из unpkg. Затем добавить класс к `<html>` чтобы через CSS можно было понимать, установился ли worklet.
+```html
+<script>
+	if ("paintWorklet" in CSS) {
+		CSS.paintWorklet.addModule("pixel-gradient-worklet.js")
+		// или
+		CSS.paintWorklet.addModule("https://www.unpkg.com/pixel-gradient-worklet/index.js")
+		document.getElementsByTagName('html')[0].classList.add('pixelGradient')
+	}
+</script>
+```
+## Использование
+Модуль может не подключиться из-за устаревших браузеров – это надо учитывать в 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');
+}
+```
+Именно в таком порядке. Снача дефолтные, потом в случае если `<html>` имеет `.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
@@ -10,7 +10,7 @@
 	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
 		rel="stylesheet">
 	<script>
-		CSS.paintWorklet.addModule("index.js")
+		CSS.paintWorklet.addModule("pixel-gradient-worklet.js")
 	</script>
 </head>
 
@@ -66,7 +66,6 @@ <h2>Менять размер за правый нижний угол</h2>
 			--gradient-angle: 105;
 			--square-size: 7;
 			--noise-intensity: 21;
-			--noise-intensity: 15;
 			width: 30rem;
 			height: 30rem;
 			border-radius: 1rem;

diff --git a/index.js → pixel-gradient-worklet.js b/index.js → pixel-gradient-worklet.js
@@ -86,4 +86,4 @@ class GradientSquares {
 	}
 }
 
-registerPaint('gradientSquares', GradientSquares);
+registerPaint('pixelGradient', GradientSquares);
diff --git a/readme images/largeGrad.webp b/readme images/largeGrad.webp
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,4 +86,4 @@ class GradientSquares { @@
     	}
     }
-    registerPaint('gradientSquares', GradientSquares);
+    registerPaint('pixelGradient', GradientSquares);