如何在滚动上实现旋转背景

Question

伙计我想制作this的演示设计，我对如何实现这一点感到困惑。我应该选择视差滚动，还是应该选择skrollr或者scrollmagic，还是只需要简单的css和少量的jquery代码？建议实现这一目标的最简单方法。 谢谢:)）

Answer 1

这是工作示例;

HTML

let formData = FormData.createNew
formData.append("file", file.[0])

的CSS

 <div class="rotate"></div>

的js

body{
    height: 1000px;
    background: yellow;
}

.rotate{
    background: url("http://i.imgur.com/zZ3fMuh.png");
    width: 101px;
    height: 102px;
    position: fixed;
}

Answer 2

在这个特殊情况下，他们在 JavaScript 的帮助下使用了 CSS ，但您正在观看的部分是CSS（非常流利）并且它会被执行我的滚动处理程序。

在这种特定情况下，他们使用transform: translate3d()属性旋转黄色背景。

Answer 3

如果要在滚动时旋转背景，请查看：https://codepen.io/sarkiroka/pen/gByRmd

简而言之，它使用侧边栏元素来实现此效果。该元素具有带有背景设置的:before属性，并且一些javascript通过scrollTop计算旋转度。并且此javascript会覆盖已定义的CSS规则转换属性。