Как я могу обрезать фоновое изображение и переместить его с анимацией? - PullRequest
Новая
       4

Как я могу обрезать фоновое изображение и переместить его с анимацией?

0 голосов
/ 04 февраля 2019

Я работаю над анимацией для части своего веб-сайта, и я хотел иметь возможность обрезать или захватить перенос фонового изображения и переместить его с анимацией.Единственная похожая вещь, которую я нашел, это https://squarespace.com.. Я подумал, что хороший способ научиться имитировать их анимацию, но я не знаю, как обрезать фон.Или мне нужно положить изображение поверх и обрезать это?Любая помощь была бы великолепна!

Я пробовал background-clip:, но, похоже, не могу получить правильные результаты.

Вот кодекс, в котором я кое-что сделал.

Нажмите здесь

Новая мысль!

Что если бы я использовал что-то вроде html2canvas для захватачасть фонового изображения.Будет ли это возможно?Кто-нибудь знаком?

1 Ответ

0 голосов
/ 04 февраля 2019

Просто примените clip-path к любому элементу.Затем вы можете изменить путь клипа (простой многоугольник в моем примере) с помощью CSS или JavaScript.Вот пример с CSS для простоты: 

body {
margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
  background: #eee;
  height: 100vh;
}

.octagon {
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.textbox {
width: 300px;
height: 300px;
word-break: break-all;
overflow: hidden;
background: #FFF;
}

.background  {
width: 300px;
height: 300px;
background: #000 url(http://lorempixel.com/300/300/sports/7) no-repeat center center scroll;
background-size: cover;
color: #FFF;
}

.animated {
  animation: animation_polygon 6000ms alternate infinite ease;
}


@keyframes animation_polygon {

  25% {
    -webkit-clip-path: polygon(45% 33%, 70% 0%, 73% 41%, 100% 70%, 62% 79%, 30% 100%, 36% 60%, 0% 30%);
    clip-path: polygon(45% 33%, 70% 0%, 73% 41%, 100% 70%, 62% 79%, 30% 100%, 36% 60%, 0% 30%);
  }

  50% {
    -webkit-clip-path: polygon(19% 6%, 57% 28%, 93% 17%, 70% 49%, 81% 93%, 45% 54%, 3% 69%, 35% 39%);
    clip-path: polygon(19% 6%, 57% 28%, 93% 17%, 70% 49%, 81% 93%, 45% 54%, 3% 69%, 35% 39%);
  }
  
  75% {
    -webkit-clip-path: polygon(35% 36%, 60% 2%, 60% 35%, 95% 67%, 64% 65%, 13% 93%, 30% 59%, 4% 38%);
    clip-path: polygon(35% 36%, 60% 2%, 60% 35%, 95% 67%, 64% 65%, 13% 93%, 30% 59%, 4% 38%);
  }

}
<main>

<img class="octagon animated" src="http://lorempixel.com/300/300/sports/2">

<div class="octagon animated background">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<div class="octagon textbox">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

<img class="octagon animated" src="http://lorempixel.com/300/300/sports/5">

</main>
...