Параллакс эффект для шапки сайта

Question

Как мне по мере прокрутки страницы сделать так, чтобы полукруг, в котором находится изображение, выпрямлялся?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.intro {
  position: relative;
  height: auto;
}

.intro img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.intro .caption {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
  color: black;
}

.intro .caption h1 {
  display: inline-block;
  width: 70%;
  font-size: 5vw;
  font-weight: 100;
}

.intro .overlay {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.intro .overlay svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text {
  width: 100%;
  height: 200vh;
}

<div class="intro">
  <img src="https://avatars.mds.yandex.net/get-pdb/909049/f1577d37-3f28-4cb6-ab6c-2cfca94456f9/s1200" />
  <div class="caption">
    <h1>Заголовок</h1>
  </div>
  <span class="overlay">
<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve" PreserveAspectRatio="none">
<path fill="#FFFFFF" d="M250,246.5c-97.85,0-186.344-40.044-250-104.633V250h500V141.867C436.344,206.456,347.85,246.5,250,246.5z"
	/>
</svg>
  </span>
</div>
<article class="text"></article>

Answer 1

function inViewport($el) {
  var H = $(window).height(),
    r = $el[0].getBoundingClientRect(),
    t = r.top,
    b = r.bottom;
  return Math.max(0, t > 0 ? H - t : (b < H ? b : H));
}
$(window).on("scroll resize", function() {
  var window_offset = inViewport($('.intro'));
  $(".overlay").height(window_offset);
  $(".caption").css("bottom", (window_offset / 4));
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.intro {
  position: relative;
  height: auto;
  transform: translateZ(0);
}

.intro img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
  mix-blend-mode: multiply;
}

.intro .caption {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
  color: black;
}

.intro .caption h1 {
  display: inline-block;
  width: 70%;
  font-size: 5vw;
  font-weight: 100;
}

.intro .overlay {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.intro .overlay svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text {
  width: 100%;
  height: 200vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">
  <img src="https://avatars.mds.yandex.net/get-pdb/909049/f1577d37-3f28-4cb6-ab6c-2cfca94456f9/s1200" />
  <div class="caption">
    <h1>Заголовок</h1>
  </div>
  <span class="overlay">
<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve" PreserveAspectRatio="none">
<path fill="#FFFFFF" d="M250,246.5c-97.85,0-186.344-40.044-250-104.633V250h500V141.867C436.344,206.456,347.85,246.5,250,246.5z"
	/>
</svg>
  </span>
</div>
<article class="text"></article>

БЛОГ НА HUSL

Параллакс эффект для шапки сайта

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