Skip to content

Latest commit

 

History

History
51 lines (47 loc) · 3.03 KB

README.md

File metadata and controls

51 lines (47 loc) · 3.03 KB
Raw

Градиент из пикселей с шумом

Это CSS Paint Worklet для создания моего любимого эффекта градиента, состоящего из больших пикселей. И каждый пиксель содержит немного шума. Тут демо. Alt text

Ещё примеры
  • Alt text
  • Alt text
  • Alt text

Важный момент. Это не градиент поверх пикселей. Это градиент состоящий из пикселей. Лучше заметно при увеличении: Alt text

Установка

Можно скачать файл модуля pixel-gradient-worklet.js и подключать. Или используйте из unpkg. Затем добавить класс к <html> чтобы через CSS можно было понимать, установился ли worklet.

<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 вида стилей:

.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> имеет .pixelGradient.

Параметры

  • Цвета должны быть валидными hex.
  • --gradient-start: #00ff00; – Первый цвет
  • --gradient-end: #ff0000; – Второй цвет
  •  
  • --square-size: 7; – Размер пикселей (квадратиков). Чем меньше размер и чем больше размер блока, тем больше нагрузка при перерисовках.
  • --noise-intensity: 20; – Сила шума. Для одного и того же визуального эффекта шума на разных цветах нужно разное значение. Около красного, зелёного или синего нужно большее значение --noise-intensity.
  • --gradient-angle – Угол направления градиента.
  • --seed – Сид для шума. По умолчанию всегда 12345.