javascript - 如何剪辑背景图像并使用动画移动它？

Question

我正在为我的网站的一部分制作动画，我希望能够剪辑或捕获背景图像的移植并使用动画移动它。我发现的唯一类似的东西来自 https://squarespace.com .我认为一个很好的学习方法是模仿他们的动画，但我不知道如何剪辑背景。或者我是否需要在顶部放置图像并剪裁它？任何帮助都会很棒!

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

这是我取得的一些进展的 Codepen。

点击here

New thought!

如果我使用类似 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>