当前位置：首页 > 网页特效 > 滚动

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

分类：滚动日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<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"></path>
      </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元素设置了一些样式：

```html
.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轴坐标。

```html
$(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');    
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果