анимация SVG

Интересные эффекты оверлея при появлении меню

Креативная идея для создания необычных переходов между контент-блоками на сайте. Шесть разных вариантов использования связки JS+CSS+SVG.

Что у нас сегодня

Эффекты SVG — это всегда прекрасно. А когда этим пользуется пряморукий программист + дизайнер — получаем то, что на демо. За основу взято визуальное отображение вертикального меню при клике на «гамбургер». Шесть различных анимаций появления, которые удивят Ваших пользователей. Вы легко можете использовать данные наработки в своих проектах.

пример анимации

Техническая часть

Приведем основные моменты кода. Делаем SVG:

CSS данного селектора:

Стили для path-элементов:

Класс JavaScript для управления параметрами:

Более подробную информацию можно найти в HTML-файлах, которые предоставлены автором по ссылке выше. Пробуйте. Удачи!

В поисках шаблона для сайта?