Question

在最近的一个项目中，我接受了Dave Rupert的Cheapass Parallax想法（Demo）并付诸实践。我在页面右侧下方有几张svg形状的夹头（23个相对简单的形状，所有内联svg），它们都以不同的速度滚动，从而产生了很酷的效果。

Dave的想法的基本思想是在滚动时更改单个css变量，该元素在calc（）语句中使用该元素来更改其transform属性，从而在页面上上下移动，从而产生视差效果。

这是他的摘录：

const title = document.querySelector('h1.title');
const speed = 0.2;
title.style.transform = 'translateY( calc( var(--scrollparallax) * 1px ) )';

window.addEventListener('scroll', function() {
  title.style.setProperty("--scrollparallax", (document.body.scrollTop || document.documentElement.scrollTop) * speed);
});

我基本上做了同样的事情，但是在我的scss文件中放了一些不同的速度变量和transform calc语句。我还必须为每个小块设置不同的'scrollparallax'变量，因为它们与页面顶部的距离会影响其工作方式。

*SCSS*

$speed1: 0.15px;
$speed2: 0.1px;
$speed3: 0.05px;
$speed4: 0.2px;

.firstSvgShape {
  transform: translateY( calc( var(--dist) * #{$speed1}) );
}
.secondSvgShape {
  transform: translateY( calc( var(--dist) * #{$speed3}) );
}

(etc...)

*JS*
const hexGroup1 = document.querySelector('.hex-group-1');
const hexGroup2 = document.querySelector('.hex-group-2');
const hexGroup3 = document.querySelector('.hex-group-3');

window.addEventListener('scroll', () => {

  const top = document.body.scrollTop || document.documentElement.scrollTop;

  if (hexGroup1) {
    hexGroup1.style.setProperty("--dist", hexGroup1.offsetTop - top);
  }

  if (hexGroup2) {
    hexGroup2.style.setProperty("--dist", hexGroup2.offsetTop - top);
  }

  if (hexGroup3) {
    hexGroup3.style.setProperty("--dist", hexGroup3.offsetTop - top);
  }

});

最初，我实际上用js完成了所有操作，并且在每个单独的svg元素上都有不同的css var，这些随页面滚动而变化。我注意到页面上有些滞后（在27“ 4k显示器上经过翻新的13” 2015 macbook pro上），但这并不重要。

我重构了一个东西，只改变了一个滚动事件函数中的4个css变量，以及css中的其他所有东西，我认为这会给我带来不错的性能提升，但是基本上是一样的。滚动不像同一站点上的其他页面那样流畅。

我可以做些什么来使滚动效果顺畅流畅吗？抛弃CSS vars并尝试其他方法？打破内嵌svgs并使用img标签？

更改影响许多SVG的滚动CSS变量的性能

0 个答案: