logo标签列表

使用SVG图像遮罩重新创建视差缩放效果

jqueryhtmlcsssvgskrollr
3
我正在尝试重新创造这个效果，位于此页面底部，其中单词 "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>

任何帮助都受到赞赏。

1个回答
4

  1. You can make an element stay fixed relative to the browser window using position: fixed.

  2. To make your mask scale relative to the element it is aplied to, use:

    <mask maskContentUnits="objectBoundingBox">

    then use coordinates in the range 0..1. That's the reason my scale() values are so small. Your shape is roughly 100x100, so I needed to scale by an extra 0.01 to get them down into the 0..1 range.

你的例子的其余部分基本上是正确的。 

$(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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接