Следующая за курсором клякса

Кляксу можно поставить в нужную секцию или на всю страницу, как в примере.

Пример можно видеть на этой странице

Для того, чтобы клякса не перекрывала контекст, ей задается позиционированние по z-оси z-index: -1. Поэтому в зависимости от верстки страницы, некоторые элементы могут ее перекрывать.

HTML:

Если убрать SVG-фильтр, получится не менее интересный эффект.

Убрать фильтр

CSS:

JS:

Цвета кляксы задаются в массиве colorArray, а ее размеры для разных экранов, в переменной maxRadius

Найдено на codepen.io у пользователя Hisami Kurita

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!