查看: 2787|回复: 5

[SVG ] HTML5 SVG制作随游览器滚动变形的半圆形页面头部

[复制链接]
发表于 2015-10-10 11:37:19 | 显示全部楼层 |阅读模式
  简要教程

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

001.jpg


  制作方法

  HTML结构

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

  1. <figure class="intro">
  2.   <img src="img/diver2.jpg" alt="" />
  3.   <figcaption class="caption">
  4.     <h1>Invasion</h1>
  5.   </figcaption>
  6.   <span class="overlay">
  7.   <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"
  8.      viewBox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve" PreserveAspectRatio="none">
  9.   <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"
  10.     />
  11.   </svg>
  12.   </span>
  13. </figure>  
复制代码
  页面的中文部分使用的是<article>元素来制作。
  1. <article class="copy">
  2.   <p class="teaser">...</p>
  3. </article>
复制代码
  CSS样式

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

  1. .intro {
  2.   position: relative;
  3.   height: auto;
  4.   -webkit-transform: translateZ(0);
  5.           transform: translateZ(0);
  6.   background-image: -webkit-linear-gradient(55deg, #8DD9FF, #FFDA00);
  7.   background-image: linear-gradient(35deg, #8DD9FF, #FFDA00);
  8. }
  9. .intro img {
  10.   position: relative;
  11.   display: block;
  12.   width: 100%;
  13.   height: auto;
  14.   z-index: 1;
  15.   mix-blend-mode: multiply;
  16. }

  17. .intro .caption {
  18.   position: absolute;
  19.   bottom: 25%;
  20.   left: 0;
  21.   width: 100%;
  22.   text-align: center;
  23.   z-index: 3;
  24.   color: white;
  25. }
  26. .intro .caption h1 {
  27.   display: inline-block;
  28.   width: 70%;
  29.   font-size: 6vw;
  30.   font-weight: 100;
  31. }

  32. .intro .overlay {
  33.   position: absolute;
  34.   bottom: -2px;
  35.   left: 0;
  36.   width: 100%;
  37.   height: 100%;
  38.   z-index: 2;
  39.   pointer-events: none;
  40. }
  41. .intro .overlay svg {
  42.   position: absolute;
  43.   top: 0;
  44.   left: 0;
  45.   width: 100%;
  46.   height: 100%;
  47. }

  48. .copy {
  49.   width: 100%;
  50.   max-width: 60rem;
  51.   height: 200%;
  52.   margin: 0 auto;
  53.   padding: 10vw 5vw 0 5vw;
  54.   color: #466c7f;
  55.   font-weight: 300;
  56. }
  57. .copy p {
  58.   margin-bottom: 1.5rem;
  59. }

  60. .copy .teaser {
  61.   font-size: 1.6rem;
  62.   text-align: center;
  63. }
  64.    
复制代码
  JAVASCRIPT

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

  1. function inViewport($el) {
  2.       var H = $(window).height(), r = $el[0].getBoundingClientRect(), t = r.top, b = r.bottom;
  3.       return Math.max(0, t > 0 ? H - t : b lt; H ? b : H);
  4.   }
  5.   $(window).on('scroll resize', function () {
  6.       var window_offset = inViewport($('.intro'));
  7.       $('.overlay').height(window_offset);
  8.       $('.caption').css('bottom', window_offset / 4);
  9.   });
复制代码
游客,如果您要下载源码或者查看隐藏内容请回复


回复

使用道具 举报

发表于 2017-6-21 14:31:48 | 显示全部楼层
考虑空间来看乐扣乐扣
回复 支持 反对

使用道具 举报

发表于 2017-7-14 11:44:20 | 显示全部楼层
感谢分享,来学习一下
回复 支持 反对

使用道具 举报

发表于 2018-1-9 09:02:34 | 显示全部楼层
看起来很不错,感谢楼主分享!!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表