Сегодня поговорим о мелких деталях которые, как вы знаете, стоят значительно больше чем большие элементы на странице. Речь пойдет о красивых линиях благодаря которым вы сможете украсить переходы между разделителями страниц. Кроме этого линии будут анимироваться в форме волн, а плавность анимации позволит добиться эффекта ненавязчивости. Нам очень понравился такой эффект, однажды встретив его на заграничном сайте, мы решили показать, как можно реализовать такой эффект на своем ресурсе и сделать это достаточно просто.

 

Добавьте такой эффект к себе на сайт, это сделать достаточно просто, и вы подарите вторую жизнь своему проекту таким мелким элементом, давайте перейдем к созданию. Смотрите также бесплатные шаблоны и не только от наших партнеров:

Шаг 1. HTML

Чтобы вызвать такие линии нам понадобиться немного HTML, а точнее одна строчка, разместите ее там где хотите увидеть такие линии:

Кроме это не забудьте указать правильный путь к стилям, а также к скриптам, которые необходимы для нормальной работы наших волн.

Шаг 2. CSS

Так как за всю работу у нас по сути будет отвечать JS, то стили будут выполнять только базовую функцию, по этому нам необходимо зафиксировать позицию для наших линий и добавить стили для контейнера ниже;

Шаг 3. JS

Последним шагом станет JS, он то и будет выполнять всю работу, нам необходимо чтобы функции отображали несколько линий, переплетали их и анимировали по заданной траектории Х, при этом не превышали указанную высоту по оси Y, также вы можете самостоятельно поменять цвета линий:

Вот такие замечательные линии получаются у вас в результате, вы можете применять их в своих проектах, добавив им некоторую изюминку.

Вот и все. Готово!