【问题标题】: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】:
    1. 您可以使用position: fixed 使元素相对于浏览器窗口保持固定。

    2. 要使蒙版相对于它所应用的元素缩放,请使用:

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

    【讨论】:

      猜你喜欢
      • 2022-10-25
      • 1970-01-01
      • 1970-01-01
      • 2017-06-10
      • 2013-07-20
      • 1970-01-01
      • 2013-03-23
      • 2020-05-23
      • 1970-01-01
      相关资源
      最近更新 更多