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

Question

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

Попытался создать этот эффект сам, используя skrollr.js, но зашёл в тупик. В идеале я бы хотел, чтобы SVG был меньше и центрирован в маске, чтобы видео оставалось фиксированным до тех пор, пока маска не исчезнет, как в примере с REFORM CO.

Вот мой HTML и ссылка на мою попытку:

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

Answer 1

Вы можете заставить элемент оставаться фиксированным относительно окна браузера, используя position: fixed
Чтобы масштабировать маску относительно элемента, к которому она применяется, используйте:

<mask maskContentUnits="objectBoundingBox">

Затем используйте координаты в диапазоне 0..1. Вот почему мои значения scale() такие маленькие. Ваша форма примерно 100x100, поэтому мне нужно было прибавить еще 0,01, чтобы уменьшить их до диапазона 0,1.

Остальная часть вашего примера была более или менее правильной

$(document).ready(function() {
  var s = skrollr.init();
  constants: {
    //заполните поле на «duration» 150% для viewport (пауза на 150%
    //настройка для короткой/длинной паузы
    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>

Answer 2

Можно получить интересные варианты, если изменять path для маски и атрибуты масштабирования и анимации.

Наверное можно обдумать возможность использование в веб дизайне видео кнопок, которые получаются при симбиозе видео и маски.

Вертикальный скроллинг

Смотрите в полно экранном режиме

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>
<p class="txt" style="font-size:24px; color:dodgerblue; text-align:center"> Scroll </p> 
<div class="container">

  <video autoplay muted loop id="myVideo">
    <source src="https://cdn.dribbble.com/users/956577/screenshots/9748924/media/52cecfa762404221c0c909edbbbccf78.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.0003) translate(-49px,-49px);"
           data-250p="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"/>
         
        </g>
      </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="white" mask="url(#knockout)"/>
  </svg>

</div>
<script>
$(document).ready(function() {
  var s = skrollr.init();
  constants: {
    
    knockout: '250p'
  }
})
</script>

Горизонтальный скроллинг

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>
<p class="txt" style="font-size:24px; color:dodgerblue; text-align:center"> Scroll </p> 
<div class="container">

  <video autoplay muted loop id="myVideo">
    <source src="https://cdn.dribbble.com/users/956577/screenshots/7123415/media/1d16d2a46974b1f26e23715be6760e55.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.0001) translate(-49px,-49px);"
           data-250p="transform: translate(0.5px,0.5px) scale(0.04) translate(-49px,-49px);">
          
          <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>
<script>
$(document).ready(function() {
  var s = skrollr.init();
  constants: {
   
    knockout: '250p'
  }
})
</script>

Скроллинг круглой маски

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>
 <p class="txt" style="font-size:36px; color:dodgerblue; text-align:center"> Scroll </p> 
<div class="container">

  <video autoplay muted loop id="myVideo">
    <source src="https://cdn.dribbble.com/users/956577/screenshots/7088448/media/6fc78c4981da9b0865c34877e5c10e06.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(-50px,-50px);"
           data-250p="transform: translate(0.5px,0.5px) scale(0.5) translate(-50px,-50px);">
          <path d="m 55.280169,50.113018 a 5.393187,6.2920518 0 0 1 -5.393187,6.292052 5.393187,6.2920518 0 0 1 -5.393187,-6.292052 5.393187,6.2920518 0 0 1 5.393187,-6.292052 5.393187,6.2920518 0 0 1 5.393187,6.292052 z"/>
          
        </g>
      </mask>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="white" mask="url(#knockout)"/>
  </svg>

</div>
<script>
$(document).ready(function() {
  var s = skrollr.init();
  constants: {
    //заполните поле на «duration» 150% для viewport (пауза на 150%
    //настройка для короткой/длинной паузы
    knockout: '250p'
  }
})
</script>

БЛОГ НА HUSL

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

Ответы (2 шт):