使用 SVG 图像蒙版重新创建视差缩放效果答案

【问题标题】：Recreating a parallax zoom effect with SVG Image mask使用 SVG 图像蒙版重新创建视差缩放效果
【发布时间】：2020-02-13 19:53:05
【问题描述】：

我正在尝试重现 at the bottom of this page 找到的效果，其中“REFORM CO”字样放大以显示带有标题的背景图像。

我尝试使用 skrollr 自己重新创建此效果，但我碰壁了。理想情况下，我希望 SVG 更小并在蒙版中居中，并且视频保持固定直到蒙版消失，就像 REFORM CO 示例一样。

这是我的 HTML 和我尝试的链接：https://jsfiddle.net/uex526qs/1/

<body>

<div class="knockout">

  <svg x="50%" y="100%" class="knockout-text-container"  height="100%" data-0="opacity:1;transform: scale(1);" data-50p="opacity:0;font-size: 10em;transform: scale(10);">

    <rect class="knockout-text-bg" width="100%" height="100%" fill="#fff" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)"/>

    <mask id="knockout-text">
      <rect width="100%" height="100%" fill="#fff" x="0" y="0"  />

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.73 97.73"><defs><style>.cls-1{fill:#000;}</style></defs><title>shape2</title><g id="Layer_2" data-name="Layer 2"><g id="Content"><path class="cls-1" d="M48.86,97.73A7.72,7.72,0,0,1,41.15,90V7.72a7.72,7.72,0,1,1,15.43,0V90A7.72,7.72,0,0,1,48.86,97.73Z"/><path class="cls-1" d="M90,56.58H7.72a7.72,7.72,0,1,1,0-15.43H90a7.72,7.72,0,1,1,0,15.43Z"/></g></g></svg>


    </mask>

  </svg>

</div>


<video autoplay muted loop id="myVideo">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>


</body>

感谢任何帮助

【问题讨论】：

标签： jquery html css svg skrollr

【解决方案1】：

您可以使用position: fixed 使元素相对于浏览器窗口保持固定。
要使蒙版相对于它所应用的元素缩放，请使用：
```
<mask maskContentUnits="objectBoundingBox">
```
然后使用 0..1 范围内的坐标。这就是我的scale() 值如此之小的原因。你的形状大约是 100x100，所以我需要额外缩放 0.01 才能将它们缩小到 0..1 范围内。

您的示例的其余部分或多或少是正确的。

$(document).ready(function() {
  var s = skrollr.init();
  constants: {
    //fill the box for a "duration" of 150% of the viewport (pause for 150%)
    //adjust for shorter/longer pause
    knockout: '150p'
  }
})

html, body {
  position: relative;
  margin: 0;
  height: 1500px;
}

.container {
  position: fixed;
}

video {
  width: 100%;
}

.overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>

<div class="container">

  <video autoplay muted loop id="myVideo">
    <source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
  </video>

  <svg class="overlay" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
    <defs>
      <mask id="knockout" maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" width="1" height="1" fill="white"/>
        <g fill="black"
           data-0="transform: translate(0.5px,0.5px) scale(0.0015) translate(-49px,-49px);"
           data-50p="transform: translate(0.5px,0.5px) scale(0.04) translate(-49px,-49px);">
          <path d="M48.86,97.73A7.72,7.72,0,0,1,41.15,90V7.72a7.72,7.72,0,1,1,15.43,0V90A7.72,7.72,0,0,1,48.86,97.73Z"/>
          <path class="cls-1" d="M90,56.58H7.72a7.72,7.72,0,1,1,0-15.43H90a7.72,7.72,0,1,1,0,15.43Z"/>
        </g>
      </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="white" mask="url(#knockout)"/>
  </svg>

</div>

【讨论】：