我们最近推出了Happy Apps。在考虑设计Happy Apps网站在美国，我们的目标是创造一些独特的、吸引眼球的、有趣的和异想天开的东西——我们应该是“快乐的”——但也要足够严肃，让我们的用户有信心信任我们对他们的正常运行时间进行监控。到目前为止，Happy Apps网站的一个设计元素得到了许多称赞(和问题)，我们称之为“管道”。The Pipes是我们使用SVG、CSS和JavaScript构建的全页面动画效果。
SVG管道在视觉上非常吸引人，许多人都想知道它是如何工作的。它非常简单，我想我应该分享一下它是如何工作的。为了方便您，我在CodePen上分离并重新创建了SVG动画的部分内容。
HTML
我们有三根管子，分别是蓝色、黄色和紫色的。这些管道是我们在Illustrator中创建的SVG路径。当与页面分离时，SVG路径看起来如下所示:
有一个div元素(它有一个类可视容器)，其中包含svg元素用于网页的特定部分。
的div元素具有固定的高度和宽度。标记看起来像这样:
< div类= "可视容器">
SVG
的svg元素是整个过程的核心，让我们来讨论一下。这很简单。的svg元素是内联的，也就是说它就在文档内部，而不是作为外部资源(.文件)。
的svg元素由几个元素组成路径表示三个管道的元素(如前所述)。一个重要的部分svg要注意的元素是viewBox属性。
< svgviewBox="0 0 563 800"Class ="stroke-lines parallax on">的viewBox属性基本上为SVG设置了一个“舞台”。
的viewBox将相对于SVG的父元素绘制。在我们的例子中，父元素是可视容器div。viewBox属性接受四个数字:min-x，min-y，宽度而且高度．
viewBox="[min-x] [min-y] [width] [height]"前两个数字，min-x而且min-y，是本源viewBox相对于SVG的父元素。在我们这里，我们的viewBox从(0,0)开始，这意味着viewBox原点在的左上角可视容器div。
从左上角绘制一个矩形，宽度为563像素，高度为800像素。那个矩形就是我们的“舞台”。它将包含SVG元素。
为什么viewBox属性有关系吗?SVG中的“S”代表“可伸缩的”。的viewBox属性允许我们告诉浏览器如何缩放svg。
当我们显式声明a时viewBox属性，我们降低了在没有按照创建时的精确尺寸使用图形时发生扭曲的风险。
CSS
页面的CSS是由萨斯：
Div.visual-container{宽度:503px;身高:800 px;位置:相对;svg}。视差{位置:绝对的;上图:0;右:0;底部:0;左:0;身高:805 px; width: 503px; margin: 0 auto; z-index: 0; overflow: visible; path, polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } &.on { path, polyline { stroke-dashoffset: 0; } } }//对于Internet Explorerhtml[data-useragent*='Trident'] {svg. html[data-useragent*='Trident'] {视差和{ path, polyline { stroke-dashoffset: 0; transition:none; } } }下面是编译后的CSS:
Div.visual-container{宽度:503px;身高:800 px;位置:相对;svg}。视差{位置:绝对的;上图:0;右:0;底部:0;左:0;身高:805 px; width: 503px; margin: 0 auto; z-index: 0; overflow: visible; } svg.paralax path, svg.paralax polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } svg.paralax.on path, svg.paralax.on polyline { stroke-dashoffset: 0; } html[data-useragent*='Trident'] svg.paralax path, html[data-useragent*='Trident'] svg.paralax polyline { stroke-dashoffset: 0; transition: none; }我用于动画SVG管道效果的关键CSS属性是stroke-dasharray而且stroke-dashoffset．的过渡属性用于创建在用户滚动页面时动态呈现管道的效果。
svg。视差路径，svg。视差和polyline { fill: none; stroke-dasharray: 3000px; stroke-dashoffset: 3000px; transition: 1.5s stroke-dashoffset ease-in; } svg.paralax.on path, svg.paralax.on polyline { stroke-dashoffset: 0; }stroke-dasharray是一个很酷的属性，它允许我们在笔画中创建虚线图案。
这是效果的关键技巧。我们使用stroke-dasharray连同物业stroke-dashoffset当用户向下滚动页面时，为了使它看起来好像管道是被绘制的。stroke-dashoffset告诉浏览器从哪里开始在路径上绘制破折号数组。
例如，为了简单起见，假设0px是路径的开始，100px是路径的结束。设置stroke-dashoffset属性设置为50px将告诉浏览器启动stroke-dasharray在路径的50px处。您可以看到，在下面的示例中，偏移量强制描边模式只绘制完整路径的一部分。
在我们的例子中，这创建了一个像这样的路径:
路径实际上已经完全画好了，但是由于我们的CSS，笔画并没有跨越整个路径。奇迹就是这样发生的。如果我们使用CSS过渡属性stroke-dashoffset，我们可以让它看起来就像管道是在飞行中绘制的:
过渡:1.5s stroke-dashoffset ease-in;JavaScript
现在来给动画计时。我们想要让它感觉像是管道在召唤你，让你在进入页面部分时继续向下滚动页面。为此，我们将一些JavaScript监听器绑定到文档滚动事件，以便当用户到达一个特定的部分时，我们触发CSS过渡．
文档。addEventListener('scroll'，函数(事件){var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;if (scrollTop > 456) {document.querySelector('节。仪表板svg.paralax”).classList.add(上);document.querySelector('一节。仪表板svg.paralax.small”).classList.add(上);}})当用户已经滚动到他们所处的SVG管道的三分之二时，我们只需通过添加名为视差和这改变了路径上的行程偏移量。
警告
有一个缺点stroke-dashoffset财产。Internet Explorer——奇怪，奇怪——不能转换stroke-dashoffset财产。因此，在Internet Explorer上的观看者仍然会看到SVG管道，但不幸的是，他们无法体验动画。
对于禁用了JavaScript的用户也是如此。因此，SVG动画是渐进增强对于功能强大的浏览器。
结论
总而言之，实现这种全页面的SVG动画效果只需要很少的代码。当与CSS和JavaScript一起使用时，很容易看到svgElement确实有潜力以一种可伸缩的、有条理的方式使我们的网页充满活力。
相关内容
