Question

我正在尝试在滚动时旋转背景图像。效果看起来像立方体。可悲的是，我无法使用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>

Answer 1

我为您做了最重要的部分。而且我敢肯定您会自己做最底层的（请参见“整页模式”中的代码段）：

$(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>

Answer 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>

如何滚动滚动背景图像

2 个答案: