это мини проект одной из библиотек, которая была в недавнем топе, хочу показать, что можно сделать, имея фантазию и базовые знания
Хочу сразу сказать, что для работы понадобятся самые базовые знания JS, другим будет не совсем понятно, что происходит.
Для начала, нам надо взять подключиться к самой anime.js, можно на официальном сайте с гитхаба скачать, но быстрее и удобнее исользовать cdn формат.
В html понадобится совсем немного, буквально 1 блок, он будет содержимым всех квадратиков, на которые будет разделен экран.
Также нам надо разделить сам экран на квадратики, для этого создаем эти квадратики в js, так как мы не знаем сколько их нам надо. в css делим наш экран на сетку (grid), так как мы снова не знаем сколько раз нам надо повторить эти квардратики, потому что они у нас только в js, через setProperty передаем эти значения в css, получаем адаптивные экран, разделенный на одинаковые квадратики с классом "tile". с помощью свойства window.onresize мы создаем сетку на каждое изменение экрана, если на пример вы перевернули телефон.
каждый tile мы стилизуем в css, делая его на пол пикселя меньше чем основные квадратики, также даем ему цвет. эффект градиента получается от цвета фона, которые мы задали блоку body, все работает так, что при нажатии на любой tile с эффектом волны у всех tile пропадает цвет, становятся прозрачными.
тут только 1 основная функция, которая и создает всю эту анимацию, называется она HandleClick. давайте разберемся что там происходит. как вы можете видеть, перед функцией есть переменная toggled со значением false.это значение мы и используем, чтобы дать прозрачность нашим плиткам. target:'.tile" означает, что наша цель - все плитки, прозрачность задается toggled. эффект волны получается путем задержки этой анимации. в библиотеке есть функций stagger, которая и нужна для задержки, а эффект волны получается от grid настроек, важная часть from:index - это значит, что анимации начинается от плитки с определенным индексом, а именно, индекса плитки на которую нажали. значение "50" отвечает за скорость, чем меньше значение, тем меньше задержка.
в принципе код не сложный, советую попытаться самому написать это, чтобы запомнить. такой красивый эффект тоже довольно часто используется на маленьких участках, но с помощью этой библиотеки и данного метода вы сможете сделать это, не потратив больше 10 минут, без библиотеки вам бы пришлось мучаться около минут 30 и больше.
надеюсь было понятно, если нет, то пишите в комментариях вопросы, на все отвечу. Удачи!
