如何剪辑的背景图像与动画动呢？

Question

我工作的一个动画，我的网站的一部分，我希望能够夹或捕捉背景图像的移植，并与动画移动。我发现的唯一类似的事情是从https://squarespace.com。我想学习就是模仿他们的动画制作的好办法，但我不知道怎么剪辑的背景。或者我需要铺设在上面的图像和剪辑？任何帮助将是巨大的！

我曾尝试background-clip:，但我似乎无法得到正确的结果。

下面是一些进展，我已经做出了Codepen。

点击here

新思路！

如果我用类似html2canvas捕捉背景图像的一部分。这将是可能的吗？是任何人都熟悉？

Answer 1

只是适用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>