如何在滚动时旋转背景图像答案

【问题标题】：How to rotate background image on scroll如何在滚动时旋转背景图像
【发布时间】：2023-05-19 07:29:01
【问题描述】：

我正在尝试在滚动时旋转背景图像。效果应该看起来像立方体。遗憾的是，我找不到使用 css 和 jquery 使其看起来像 video 的方法。在 gif 上，当从画廊向下滚动到下一页时，有一个烧烤背景，它会根据显示的页面数量旋转和拉伸。

编辑：Rotating animation has to look like this

到目前为止我尝试了什么（不成功）

$(function() {
  var rotation = 0,
    scrollLoc = 0;
  $(window).scroll(function() {
    $("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
    var newLoc = $(document).scrollTop();
    var diff = scrollLoc - newLoc;
    rotation += diff, scrollLoc = newLoc;
    var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
    $("#home").css({
      "-webkit-transform": rotationStr,
      "-moz-transform": rotationStr,
      "transform": rotationStr,
      "background-size": -rotation
    });
  });
})

body,
html {
  height: 100%;
}

body {
  background-color: #090909;
}

#home {
  height: 100%;
  position: relative;
  overflow: hidden;
}

#galerie {
  color: green;
}

#home:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  background-color: grey;
  background-attachment: initial;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id=box>
    <div id="home">
      TestText
    </div>
  </div>
  <div id="galerie">

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div id="gale">

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>

【问题讨论】：

查看jsfiddle.net/g3k6h/4
这对我没有任何帮助，你可以在我的代码中看到我没有问题旋转，而是定位
我看不到视频中的旋转内容

标签： javascript html css jquery-animate css-animations

【解决方案1】：

我已经为你做了顶部。而且我相信您会自己制作底部的（请参阅全页模式中的 sn-p）：

$(function() {
  $(window).scroll(function() {
    $('#home_bg').css({
      'transform': 'rotateX(' + 30 * (1 + Math.PI * Math.atan($(document).scrollTop() / 300)) + 'deg)'
    });
  });
})

html,
body {
  height: 100%; margin:0 ;padding:0
}

body {
  background-color: #333;
}

#home {
  height: 30vh;
  position: relative;
  overflow: hidden;
  perspective: 300px;
  color:#fff;
  text-align:center;
}

#home_bg {
  content: "";
  background: repeating-linear-gradient(45deg, #555, #555 2px, transparent 0, transparent 60px), repeating-linear-gradient(-45deg, #555, #555 2px, transparent 0, transparent 60px) 30px 30px / 170px 170px;
  position: absolute;
  z-index: -1;
  top: -100%;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotateX(30deg);
  transform-origin: 50% 100%;
}

#galerie {
  color: green;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  width: 50%;
  margin: 0 auto 70vh;
}

#galerie img {
  width: 45%;
  margin: 0 auto 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="home">
    <h1>Lorem ipsum?</h1>
    <div id="home_bg"></div>
  </div>
  <div id="galerie">
    <p></p>
    <img src="https://picsum.photos/100/100?1">
    <img src="https://picsum.photos/100/100?2">
    <img src="https://picsum.photos/100/100?3">
    <img src="https://picsum.photos/100/100?4">
    <img src="https://picsum.photos/100/100?5">
    <img src="https://picsum.photos/100/100?6">
  </div>
</body>

【讨论】：

非常感谢，你是唯一真正阅读问题的人
@HynekBernard，乐于助人！如果您有任何问题，请告诉我。

【解决方案2】：

希望你喜欢这样。

$(function() {
    var rotation = 0;
    var interval;
    var gear = $('.gear');
    
    function animate() {
        gear.css('transform', 'rotate('+rotation+'deg)');
        rotation += 10;
        rotation %= 360;
    }
    function startAnim() {
        if (!interval) {
            interval = setInterval(animate, 50);
        }         
    }    
    function stopAnim() {
        clearInterval(interval);
        interval = null;
    }    
    $(document).scroll(startAnim).mouseup(stopAnim);
});

body{
    height: 1000px;
}

.gear{
    background: url("https://cdn.pixabay.com/photo/2016/01/03/11/24/gear-1119298_960_720.png") no-repeat;
    width: 100%;
    height: 100px;
    position: fixed;
    background-position: center center;
    background-size: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gear"></div>

【讨论】：

我不想像*一样旋转它，我需要将它旋转 3d X，如图 gif 所示