HTML5 SVG制作滚动变形的半圆形页面头部特效

这是一款使用HTML5 SVG制作的效果炫酷的半圆形页面头部图片滚动变形动画特效。该特效使用SVG路径来剪裁图片，制作为半圆形的样式。并在页面滚动时动态调整曲线的弧度，制作变形效果。

制作方法

HTML结构

用于制作页面顶部图片的是一个<figure>元素，在它里面有一个指定路径的SVG元素。

<figure class="intro">
  <img src="img/diver2.jpg" alt="" />
  <figcaption class="caption">
    <h1>Invasion</h1>
  </figcaption>
  <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>
</figure>               
              

页面的中文部分使用的是<article>元素来制作。

<article class="copy">
  <p class="teaser">...</p>
</article>                
              

CSS样式

这个效果的CSS样式非常简单，其中在图片上添加了mix-blend-mode: multiply;混合模式，在支持这个属性的浏览器上可以看到效果。

.intro {
  position: relative;
  height: auto;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  background-image: -webkit-linear-gradient(55deg, #8DD9FF, #FFDA00);
  background-image: linear-gradient(35deg, #8DD9FF, #FFDA00);
}
.intro img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
  mix-blend-mode: multiply;
}

.intro .caption {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
  color: white;
}
.intro .caption h1 {
  display: inline-block;
  width: 70%;
  font-size: 6vw;
  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%;
}

.copy {
  width: 100%;
  max-width: 60rem;
  height: 200%;
  margin: 0 auto;
  padding: 10vw 5vw 0 5vw;
  color: #466c7f;
  font-weight: 300;
}
.copy p {
  margin-bottom: 1.5rem;
}

.copy .teaser {
  font-size: 1.6rem;
  text-align: center;
}
                
              

JAVASCRIPT

在jQuery代码中，inViewport()函数用于获取当前SVG视口的高度，然后为窗口滚动和浏览器尺寸改变添加事件监听，修改遮罩层的高度和标题的位置。

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 lt; H ? b : H);
  }
  $(window).on('scroll resize', function () {
      var window_offset = inViewport($('.intro'));
      $('.overlay').height(window_offset);
      $('.caption').css('bottom', window_offset / 4);
  });