Question

我正在创建一个在“桌面”设计上设置的网站，换句话说就是在整个页面中展开div页面的单个页面。

我使用scrollTo进行导航，在导航动画期间，我想让背景上方的图像进行视差滚动，以帮助感受深度和动作。

此时我已经使用了很多插件，并且找不到任何可以提供我想要的东西，所有的图像都会在页面的不同区域和不同的速度上有起始位置，因此我需要能够在页面加载上设置一个位置。可能会有大量（大量）图像需要这样做。

我已经这么做了很长时间，我现在必须使用互联网的天才来救我！

Answer 1

视差滚动相当简单，不需要插件，但您可以轻松地将其附加到$.fn以使其成为jQuery插件：

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>

多向和多图像，视差滚动

1 个答案: