logo

Свойство clip-path

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

Обо всех этих возможностях написано множество статей, поэтому на них останавливаться не будем. Сегодня рассмотрим несколько иное применение свойства clip-path

Во многих случаях верстки, при наведении на картинку происходит некая трансформация — сдвиг, перемещение, вращение-кручение и многое другое. Но во всех этих случаях изображение трансформируется в целом виде, т.е картинка, скажем, съезжает влево целиком, а не какая-то его часть, открывая при этом новую информацию.

В этой статье мы будем «рвать» картинку на 2 части, причем линию разрыва можем выбирать различной формы. Все начинается с HTML-кода. Через тег figure прописываем 2 одинаковые картинки, каждую из них будем обрезать по своим параметрам и 2 SVG — прямоугольника, которые за счет width= «0» и height= «0» невидимы. Каждой SVG-картинке задаем свой идентификатор.


<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="">
</figure>

<svg id="svghalve_x" width="0" height="0">
  <defs>
    <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 0,1 0,1 .5,0 .5" />
    </clipPath>
    <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 .5,1 .5,1 1,0 1" />
    </clipPath>
  </defs>
</svg>

В таблице стилей прописываем необходимые параметры.


#halve_x {
  position: relative;
  width: 750px;
  height: 421px;
  margin: 40px auto;
  overflow: hidden;
  background: url(img_2.jpg);
  background-size: cover;
}
     /* Размещаем оба изображения внутри <figure> */
#halve_x img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 2s ease-in-out;
}
     /* Делим каждое из изоброжений попалам */
#halve_x img:first-of-type {
  clip-path: url(#tophalf);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
#halve_x img:last-of-type {
  clip-path: url(#bottomhalf);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
     /* При наведении каждая из половинок трансформируется по своим параметрам */
#halve_x:hover img:first-of-type {
  transform: translateY(-45%);
}
#halve_x:hover img:last-of-type {
  transform: translateY(45%);
}
     /* Параметры надписи */
#halve_x figcaption {
  position: absolute;
  top: 0;
  padding:3% 0;
  font-size:60px;
  text-shadow: 2px 2px 5px #111;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}

На этом можно было и закончить, если бы не одно НО.
На примере 1, когда «линия раздела» проходит практически по линии горизонта и поэтому «теряется» в пестроте красок. Но стоит «линию раздела» сдвинуть немного выше или ниже увидим перфорированную линию ( состоит из множества «дырочек», через которые просматривается изображение, которое открывается при наведении). Это хорошо просматривается на примерах 2 и 3, если их задавать по той же схеме, что и пример 1.

Для того, чтобы избавиться от этой проблемы добавим еще одно изображение между уже заданными, которое скроет «перфорацию»


<figure id="halve_x">
  <figcaption>Вулкан не дремлет</figcaption>
  <img src="img_1.jpg" alt="">
  <img src="img_1.jpg" alt="" class="opasity">
  <img src="img_1.jpg" alt="">
</figure>
......

При наведении эта картинка будет «пропадать» до момента начала трансформации и «появляться» после полного «смыкания» линии разрыва.


#halve_x img.opasity{
  transition:2s cubic-bezier(1,.01,.96,.06);
}
#halve_x:hover img.opasity {
  opacity: 0;
  transition: .1s ;
}

«Линию разрыва» можно задавать какой угодно, все зависит от желания и возможностей верстальщика. Виды трансформации изображения ограничены только фантазией разработчика, можно применить не только плоскостные, но и 3D-трансформации.

Вот один из вариантов для 2 примера.


#halve_diagonal:hover img.halve__img:first-of-type {
  transform:scale3d(0,1,-1);
}
#halve_diagonal:hover img.halve__img:last-of-type {
  transform: scale3d(1,0,0);
}

Остается пожелать творческих успехов.

Как это выглядит в реальности можете посмотреть на демо-странице.


Практические примеры 0

Рекомендую прочитать...

3D-трансформации
3D-трансформации

С помощью 3D-трансформации создаются объемные реалистичные эффекты на веб-страницах. В отличии от простой ( в одной плоскости ) трансформации в 3D-трансформации элементы могут дополнительно перемещаться вдоль оси Z. Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.

Читать полностью
Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Анимация при скролле страницы
Анимация при скролле страницы

Как и было обещано в предыдущей статье «Бегущая строка на CSS3» сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Существуют различные способы для реализации данной проблемы. В статье рассмотрим 2 варианта решения. Они довольно простые и не вызовут затруднений при их реализации.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.