svg 文字滚动_滚动的SVG日落

svg 文字滚动

Landscape illustrations are well-suited for parallax animation, typified by the excellent example of the site for Firewatch. These examples tend to move in vertical space, and usually inefficiently at that, forced to translate massive alpha-masked PNG files in layers.

横向插图非常适合视差动画，以Firewatch网站的出色示例为代表 。 这些示例倾向于在垂直空间中移动，并且通常效率低下，因此不得不将大量的带有alpha蒙版的PNG文件分层转换。

It occurred to me that for certain applications SVG might make a very good alternative: not only would the vector layers of the illustration be small and light, but they could also be recoloured and moved individually, as shown in the demo above.

我想到，对于某些应用程序， SVG可能是一个很好的选择：如上面的演示所示， SVG不仅矢量插图既小又轻，而且还可以重新着色并单独移动。

建立Mesas (Building the Mesas)

The landscape is built as a series of closed paths, with the exception of the sun, which is a simple element:

除了阳光(这是一个简单的元素)外，景观被构建为一系列封闭的路径：

The paths are built “back to front”: the most distant mesa layer is defined first, followed by the next closest, and so on.

路径是“从后到前”构建的： 首先定义最远的台面层，然后定义下一个最接近的台面层，依此类推。

天空与阴影 (Sky & Shade)

Rather than creating a element for the sky, the element is filled with color using CSS:

不用为天空创建元素 ，而是使用CSS使用颜色填充元素：

#arizona { background: hsl(47, 100%, 86%);
}

The repeated use of HSL - inline for the SVG layers and via a stylesheet for the SVG itself - is key to the effect. By altering the luminosity component of each element in response to a scroll event, we can provide the impression of a sunrise or sunset.

重复使用HSL (对于SVG层是内联的，对于SVG本身是通过样式表的)是效果的关键。 通过响应滚动事件来更改每个元素的发光度分量，我们可以提供日出或日落的印象。

The tricky part is extracting the HSL from each element. To achieve this, I used a regular expression in JavaScript, defined while gathering other data about the SVG element:

棘手的部分是从每个元素中提取HSL。 为此，我在JavaScript中使用了一个正则表达式，在收集有关SVG元素的其他数据时定义了该正则表达式：

var regex = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/,
arizona = document.getElementById("arizona"),
mesaLayers = arizona.querySelectorAll("path"),
SVGoffsettop = arizona.getBoundingClientRect().top,
vertHeight = arizona.getBoundingClientRect().height,
sun = document.getElementById("sun");

mesaLayers gathers all the paths together. The window scroll is handled inside a function:

mesaLayers汇集了所有路径。 窗口滚动在函数内部处理：

function scrollHandler() {if (window.scrollY < vertHeight) {Array.prototype.forEach.call(mesaLayers, function(layer) { var layerFill = layer.getAttribute("fill"),vertRoll = Math.abs(window.scrollY - vertHeight) / vertHeight;hslComponents = layerFill.match(regex).slice(1),newLum = parseFloat(hslComponents[2]) * vertRoll;layer.style.fill = "hsl(" + hslComponents[0] +", " + hslComponents[1] + "%, " +  newLum + "%)";arizona.style.background = "hsl(48, " + 100 * vertRoll + "%, " + 88 * vertRoll + "%)";sun.style.transform = "translate3d(0," + window.scrollY / 10 + "px, 0)";})
}

In order, this function:

为了执行此功能，请执行以下操作：

1. Extracts the fill of each path

   提取每个路径的fill

2. Determines the amount that the window has been scrolled
   确定窗口已滚动的数量
3. Extracts the HSL of each path
   提取每个路径的HSL

4. Alters the luminosity component of the path fill in relation to the amount of scroll

   相对于滚动量更改路径fill的亮度分量

5. Reassembles the HSL color for the path, including the new luminosity component, and applies it as a style.

   重新组合path的HSL颜色，包括新的发光度组件，并将其用作样式。

6. Changes the background of the SVG, again in relation to how much the page has been scrolled.

   再次更改SVG的background ，与页面已滚动多少有关。

7. Moves the sun element down using translate3d, to create a sunset.

   使用translate3d将sun元素向下移动以创建日落。

Note that CSS transforms don’t yet work on SVG elements in Internet Explorer or MS Edge, although support is scheduled for the latter browser.

请注意，尽管已为CSS浏览器安排了支持，但CSS转换尚不适用于Internet Explorer或MS Edge中的SVG元素。

The function is called using requestAnimationFrame for improved performance:

使用requestAnimationFrame调用该函数可提高性能：

window.onscroll = function() {window.requestAnimationFrame(scrollHandler);
}

哇，巴卡鲁 (Woah There, Buckaroo)

Tying element changes to scrolling can be problematic: if the relationship is too close, changes may happen too quickly to be appreciated. The easiest way to slow things down is to introduce a governing factor. The code changes to something like this:

将元素更改绑定到滚动可能会出现问题：如果关系太紧密，更改可能会发生得太快而无法理解。 减慢速度的最简单方法是引入控制因素。 代码变为如下所示：

if (window.scrollY < SVGoffsettop * 4) {Array.prototype.forEach.call(mesaLayers, function(layer) { var layerFill = layer.getAttribute("fill"),vertRoll = Math.abs((window.scrollY / 4 ) - SVGoffsettop) / SVGoffsettop;
…

结论和可能的改进 (Conclusion & Possible Improvements)

Normally an effect like this would use position: fixed on the SVG element to keep it in place while the rest of the page is scrolled; in this case, I’ve removed that so that the demo can be integrated with the rest of the page, but the CodePen version has it in place. A parallax effect could be introduced along with the scroll, but I decided to concentrate on just the sunset aspect for this article.

通常，这样的效果将使用position: fixed在SVG元素上，以在滚动页面的其余部分时将其position: fixed在原处； 在这种情况下，我已删除了该代码，以便该演示可以与页面的其余部分集成，但是CodePen版本已将其安装到位。 视差效果可以与滚动一起引入，但是我决定本文只关注日落方面。

The two remaining inefficient aspects of the script are:

该脚本剩下的两个低效方面是：

1. the repeated extraction and reassembly of the HSL components; it would probably be better to create these as properties for each element that were retained in the script, rather than being recalculated each time
   反复提取和重新组装HSL组件； 最好将这些属性创建为脚本中保留的每个元素的属性，而不是每次都重新计算
2. the hard-coded colors of the sky background in the script; gaining the colors from the CSS would be better, as the script could then respond to changes in the presentation, rather than having to duplicate changes.
   脚本中天空背景的硬编码颜色； 从CSS中获取颜色会更好，因为脚本随后可以响应演示文稿中的更改，而不必重复更改。

I’ll explore these changes and much more in future articles.

我将在以后的文章中探讨这些更改以及更多内容。

翻译自: https://thenewcode.com/1098/A-Scrolling-SVG-Sunset

svg 文字滚动

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！