Как сделать переходы между разделами на сайте в виде волны?

В этой статье мы рассмотрим, как используя CSS и векторную SVG графику визуально оформить разрыв между секциями страницы в виде плавно изогнутой кривой линии.

Процесс разработки перехода начнём с создания SVG изображения.

После создания SVG, рассмотрим несколько примеров его применения для оформления границы блока.

Создание SVG изображения в форме волны

Если вам нужно создать SVG волну какой-то определённой формы, то в этом случае её необходимо нарисовать, используя векторный графический редактор, например, такой как Adobe Illustrator или Inkscape.

Пример готовой волны, выполненной с использованием кривых Безье в Inkscape.

После того как нужный контур будет готов документ Inkscape необходимо сохранить в SVG файл предварительно подогнав размер страницы под изображение.

При желании вы также можете оптимизировать полученное изображение, например, воспользовавшись сервисом SVGOMG.

В завершении вам необходимо открыть полученный SVG файл и скопировать его код себе на страницу.

Генерирование SVG волны с помощью сервиса getwaves.io

Если вам не нужна волна строго определённой формы, то в этом случае её можно сгенерировать через сервис getwaves.io. Он позволяет очень просто создавать плавные уникальные SVG волны. Генерирование случайной SVG картинки осуществляется посредством нажатия на кнопку с изображением кубика.

После того как вы подобрали волне нужную форму, её необходимо получить. Осуществляется это посредством нажатия на значок «Загрузка». Здесь сервис предлагает на выбор два варианта: скачать SVG файл или скопировать код. Т.к. изображение мы будем непосредственно размещать в HTML коде, то сделаем это через 2 вариант.

Примеры использования SVG волны для оформления перехода между секциями

1. Использование SVG волны для оформления нижней границы элемента.

<style>
.banner {
  position: relative;
}
.banner__content {
  background: url('background.jpg');
  background-size: cover;
}
.banner svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.banner svg path {
  fill: #fff;
}
</style>

<!-- BANNER -->
<section class="banner">
  <div class="banner__content">
    <h1>Добро пожаловать на сайт</h1>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 180"><path d="M0 43.418h288c96 0 192 0 288 26.7 96 26.3 192 80.3 288 69.3s192-85 288-117.3c96-31.7 192-21.7 240-16l48 5.3V180H0z" /></svg>
</section>

В этом примере мы достигли данный эффект следующим образом:

1. Расположили SVG изображение над элементом .banner__content относительно его нижней границы. Чтобы это выполнить мы установили элементу <svg> абсолютное позиционирование, а .banner – относительное. После этого положение <svg> определили с помощью CSS свойств top и left, а размер - посредством width.
2. Скрыли часть картинки, над которой расположен <svg>. Для этого мы просто залили его контур цветом фона страницы, в данном случае #fff.

2. Создание перехода с использованием нескольких волн.

<style>
.banner__content {
  background: linear-gradient(180deg, #7125ce 0%, #150044 100%);
  padding-top: 8%;
  padding-bottom: 8%;
}
.banner svg {
  width: 100%;
  fill: #150044;
}
</style>

<!-- BANNER -->
<section class="banner">
<div class="banner__content">...</div>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1280 140"><path d="M0 51.76c36.21-2.25 77.57-3.58 126.42-3.58 320 0 320 57 640 57 271.15 0 312.58-40.91 513.58-53.4V0H0z" fill-opacity=".2"/><path d="M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V0H0z" fill-opacity=".8"/><path d="M0 0v3.4C28.2 1.6 59.4.59 94.42.59c320 0 320 84.3 640 84.3 285 0 316.17-66.85 545.58-81.49V0z"/></svg>
</section>

3. Пример, в котором волне добавлена анимация с помощью CSS

<style>
.banner__content {
  background: #3f51b5;
}
@keyframes move {
  from {
    transform: translate(-90px, 0%);
  }

  to {
    transform: translate(90px, 0%);
  }
}

.banner svg {
  width: 100%;
  background: #3f51b5;
  display: block;
  width: 100%;
  height: 10vw;
}

.banner svg>g>use {
  animation: move 30s linear infinite;
}

.banner svg>g>use:nth-child(1) {
  animation-delay: -2s;
  fill: #7986cb;
}

.banner svg>g>use:nth-child(2) {
  animation-delay: -2s;
  animation-duration: 17s;
  fill: #5c6bc0;
}

.banner svg>g>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
  fill: #ffffff;
}
</style>

<!-- BANNER -->
<section class="banner">
  <div class="banner__content">
    <h1>Добро пожаловать на сайт</h1>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewbox="0 25 160 40" class="waves">
    <defs><path id="wave" d="M-150 53c30.77 0 59.538-20 90-20 31.077 0 60.256 20 90 20 30.77 0 59.23-20 90-20 30.77 0 59.23 20 90 20v20h-360z"/></defs>
    <g>
      <use xlink:href="#wave" x="50" y="0" fill="#7986cb"/>
      <use xlink:href="#wave" x="50" y="2" fill="#5c6bc0"/>
      <use xlink:href="#wave" x="50" y="4" fill="#ffffff"/>
    </g>
  </svg>
</section>