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

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

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

简介

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

```html
<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"
    ></path>
  </svg>
  </span>
</figure>    
```           
页面的中文部分使用的是article元素来制作。

```html
<article class="copy">
  <p class="teaser">...</p>
</article>  
```              
#####  CSS样式
这个效果的CSS样式非常简单，其中在图片上添加了mix-blend-mode: multiply;混合模式，在支持这个属性的浏览器上可以看到效果。

```html
.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视口的高度，然后为窗口滚动和浏览器尺寸改变添加事件监听，修改遮罩层的高度和标题的位置。

```html
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);
  });     
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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