Анимированные SVG-волны для разделения секций в шаблоне Modern. Виджет

+6
1.48K
Анимированные SVG-волны для разделения секций в шаблоне Modern. Виджет

Однажды мне понадобилось разделить секции на сайте. Банально, но сделав это путем border-bottom {3px solid #1539A7}, я не испытал того наслаждения, которое должен получить вэб-мастер. И тут я вспомнил про крутую фишку — анимацию в виде волн. Ими можно довольно креативно разделять секции, а если написать подобное решение виджетом, то можно довольно гибко управлять цветом и размерами.

Сказано-сделано! В результате беглого изучения документации по базовой анимации svg элементов была составлена самая простая в мире структура волн, которую я успешно запихал в виджет и прописал в нее настройки из options.form.php.

Особо не увлекался — так что в виджете доступно всего четыре волны, причем самая нижняя волна принимать цвет фона секции, которая расположена под ней.

Изображение

Сразу перейду к очевидным минусам: тестировал только на модерне, и на версиях ниже 2.14 вряд ли будет работать. Но — могу ошибаться.

Как пользоваться

1) Создайте новый ряд в вашем шаблоне и укажите в нем следующие настройки: Класс секции укажите waves

Изображение

Но, можно и не создавать такую секцию. Если волны нужны в контейнере — то просто расположите виджет над ним и все будет прекрасно. Мне был нужен эффект для секции с шириной в 100%, поэтому, если у вас также — то делаем аналогично рисунку выше. Если волны нужны в колонке — то в самом верху колонки. Думаю, логика понятна.

2) Расположите виджет. Не забудьте предварительно его установить. Обратите внимание — виджет должен быть вверху всех элементов секции. Выставьте настройки в виджете. Настройки весьма просты:

Изображение

Настройки весьма просты и незамысловаты, но виджет работает как надо.

Нет комментариев. Ваш будет первым!

Еще от автора

Бесплатный компонент - управление страницами 404
Простой компонент, который позволяет переопределить настройки дефолтной страницы 404, а также установить новую на выбор из двух представленных шаблоно
User-Panel v.1.0.4
Большое обновление виджета, множество улучшений, а также дополнительный запланированный функционал.
User-панель. Функциональное меню для вашего сайта
Виджет, который позволит вывести на вашем сайте функциональную панель с различными настройками.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.