Рисовалка анимированных теней
В процессе изучения JS решила написать рисовалку CSS-анимаций на основе box-shadow
. Получила море удовольствия и узнала много нового.
В действующем виде можно посмотреть прямо тут:
- на отдельной странице: yoksel.github.io/shadowPainter/.
- проект на гитхабе: github.com/yoksel/shadowPainter.
А вот здесь можно посмотреть что получается в итоге: Box-shadows Animations
Редактор позволяет рисовать разноцветные анимированные узоры из клеточек. Можно управлять скоростью анимации, размером поля, количеством клеточек и кадров.
Готовую анимацию можно получить в виде кода.
Несмотря на то, что мне хотелось бы добавить ещё пару-тройку разных фич, на данный момент можно считать проект в большей степени готовым (а то допиливать можно до бесконечности).
Что хотелось бы сделать: выбор из нескольких палитр и возможность рисовать линиями, а не точками, как сейчас, очистку отдельной сцены и/или всех шагов. Done.
Хотя я довольно давно знакома с JS и уже писала на нем всякие простые штуки, обычно используя JQuery, до основательного изучения добралась только сейчас, поэтому буду признательна за комментарии по коду, советам по лучшей организации и ссылкам на полезные книги и статьи.
- Ссылки по теме:
- Box-shadow
- Метки:
- тени,
- анимация,
- инструменты,
- JS