旋转滚动元素，最简单的方法是什么？

在我实习的网站上，我想制作一个箭头，一旦用户滚动下来就会变平。我试图用jQuery做到这一点，但这对浏览器来说似乎非常沉重。旋转滚动元素，最简单的方法是什么？

对于这个函数，我使用的.scroll（）函数和计算，使箭头（三角形）更平坦，一旦用户向下滚动：

$(window).scroll(function(e){ 
    triangleRotation = 5.6125 - ($(window).scrollTop()/($(window).height()/7.3)); 
     if (triangleRotation <= 0) { 
     triangleRotation = 0; 
     } 
     $('.triangle-left').css({'transform': 'rotate(' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(' + triangleRotation + 'deg)', '-moz-transform': 'rotate(' + triangleRotation + 'deg)'}); 
     $('.triangle-right').css({'transform': 'rotate(-' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(-' + triangleRotation + 'deg)', '-moz-transform': 'rotate(-' + triangleRotation + 'deg)'}); 
});

我还经由三角形图像尝试这样做，并简单地扁平化图像。这也是沉重的。

有没有更重的方式来做到这一点？

来源

2016-04-20 Maarten Wolfsen

我建议总是使用CSS变换，因为这应该只触发画图，而不是回流或布局。 - 另外，确保你在'onscroll'事件函数上使用'throttle'。 – evolutionxbox

这是通过css转换完成的，我刚刚发布了源代码 –

也许在每次触发滚动事件时都不计算'$（window）.height（）/ 7.3'。 - [这里是一个JS节流的例子]（http://benalman.com/projects/jquery-throttle-debounce-plugin/） – evolutionxbox

你可以尝试：

创建一个全局可达变量“is_scrolling”，它在滚动事件设置为true（如果它是不正确的）。
如果用户停止滚动，请使用here中的代码将该变量设置为false
使用setTimeout进行旋转。您可以使用超时时间和每步度数（如果旋转独立于滚动位置）来管理速度，否则使用您的计算。

优点是，这是从滚动事件中分离出来的。您无法控制滚动事件触发的频率，但触发您可以控制的setTimeout中的功能。

来源

2016-04-20 13:30:04 TehSphinX

我会尝试这些事情，谢谢！ –

旋转滚动元素，最简单的方法是什么？

回答

相关问题