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

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

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

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

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

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

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

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

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

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

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

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

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

Создание SVG волны посредством сервиса getwaves.io.

После того как вы подобрали волне нужную форму, её необходимо получить. Осуществляется это посредством нажатия на значок «Загрузка». Здесь сервис предлагает на выбор два варианта: скачать 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>

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

Расположили SVG изображение над элементом .banner__content относительно его нижней границы. Чтобы это выполнить мы установили элементу <svg> абсолютное позиционирование, а .banner – относительное. После этого положение <svg> определили с помощью CSS свойств top и left, а размер - посредством width.
Скрыли часть картинки, над которой расположен <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>

Комментарии: 6

zhanar
2021-03-14 17:21:43
Извините подскажите плз
как теперь поставить такие волны на тильде зеро
скапировать этот код и можно поставить если да то куда

Александр Мальцев
2021-03-16 14:20:49
Привет! Не подскажу, с Тильдой не знаком.

Sanjar

2020-12-10 15:39:49

нужны маленькие волны типа таких ibb.co/DD6j53W
Спасибо заранее

2020-12-10 20:20:17

Вот пример сделал с бекграундом но он что то дёргается в каком-то секунде. codepen.io/sanyokdb/pen/rNMWBEd

Александр Мальцев

2020-12-13 16:02:12

Здравствуйте! Вам необходимо, чтобы совпадали начало и конец волны.