HTML5 SVG带视觉差效果的响应式不规则分段布局

这是一款使用HTML5 SVG制作的带视觉差效果响应式不规则分段布局特效。该特效使用SVG将各个段落制作为不规则图形。同时使用jQuery来在页面滚动时制作一些轻微的视觉差效果。

制作方法

HTML结构

在这个布局中，每一个div.section是一个段落，从第二个段落开始，使用SVG的clipPath元素来制作不规则图形剪裁路径。并使用<image>元素来作为背景图片，在图片上应用clipPath剪裁路径。

<div class="section section-1">
  <div class="section__bg"></div>
  <h2 class="section__heading">Page 1</h2>
</div>
<div class="section section-2">
  <svg viewBox="0 0 1900 970" preserveAspectRatio="xMidYMin slice" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="section__svg">
    <defs>
      <clipPath id="clippath-2">
        <path fill="none" class="section__svg-path" d="M1900,0 0,150 0,970 1900,970z"/>
      </clipPath>
    </defs>
    <image xlink:href="1.jpg" width="1900" height="1940" x="0" y="-35%" clip-path="url(#clippath-2)"></image>
  </svg>
  <h2 class="section__heading">Page 2</h2>
</div>
...          
              

CSS样式

这个布局的CSS样式非常简单。这里主要是为第一个段落设置样式。同时也为SVG元素设置了一些样式：

.section {
  height: 100%;
  position: relative;
  padding: 20vh 10rem 0;
}
.section__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background-size: cover;
  will-change: transform;
}
.section__svg {
  position: absolute;
  top: -20rem;
  left: 0;
  width: 100%;
  height: calc(100% + 20rem);
}
.section__svg image {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.section__heading {
  position: relative;
  font-size: 5rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
}
.section.section-1 .section__bg {
  will-change: transform;
  -webkit-transform: translate3d(0, -16.66667%, 0);
          transform: translate3d(0, -16.66667%, 0);
  background-image: url(2.jpg);
}              
              

JAVASCRIPT

页面滚动时的视觉差效果是在jQuery代码中完成的。jQuery代码中为窗口绑定滚动事件，然后使用滚动的百分比来作为参数设置背景的transform:translate3d属性，以及SVG图片的Y轴坐标。

$(window).on('scroll', function () {
    var st = $(window).scrollTop();
    $sections.each(function () {
        var $this = $(this), $bg = $(this).find('.section__bg'), $svgImg = $(this).find('.section__svg image'), offsetTop = $this.data('offset'), height = $this.data('height'), ofTop = offsetTop - height, percent = 0;
        percent = (st - offsetTop + winH) / height * 100;
        if (st < offsetTop - winH)
            percent = 0;
        if (st > offsetTop + height)
            percent = 200;
        $bg.css('transform', 'translate3d(0,' + percent / -6 + '%,0)');
        $svgImg.attr('y', -35 - percent / 7 + '%');
    });
});
$(window).trigger('scroll');