时间戳

首页 > 解决方案 > 慢速旋转滚动效果js

javascript - 慢速旋转滚动效果js

问题描述

嘿，我找到了一种用这个来旋转我的svg的方法

var leftgear = document.getElementById("spin"),
rightgear = document.getElementById("spin2");

window.addEventListener("scroll", function() {
    leftgear.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});

我面临的问题是它旋转得太快了。它需要减速至少 70%。我也无法使用 jquery，因为我正在使用 vue.js

标签： javascripthtmlcssvue.js

解决方案

如果您需要将其更改为 70%，只需执行以下操作：

 var leftgear = document.getElementById("spin"),
    rightgear = document.getElementById("spin2");
    var multiplier = 0.7;
    window.addEventListener("scroll", function() {
        leftgear.style.transform = "rotate("+window.pageYOffset*multiplier+"deg)";
        rightgear.style.transform = "rotate(-"+window.pageYOffset*multiplier+"deg)";
    });

您可以将乘数更改为您想要的任何值，它会以不同的速度运行。

推荐阅读