Воссоздание эффекта увеличения параллакса с маской SVG Image - PullRequest
Новая
       8

Воссоздание эффекта увеличения параллакса с маской SVG Image

1 голос
/ 13 февраля 2020

Я пытаюсь воссоздать эффект, найденный внизу этой страницы , где слова "REFORM CO" Увеличить, чтобы показать фоновое изображение с заголовком.

Я попытался чтобы воссоздать этот эффект сам, используя скроллр, но я врезался в стену. в идеале я бы хотел, чтобы 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 Ответ

1 голос
/ 16 февраля 2020

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