视差 - 让文本以 1/10 的速度滚动

Parallax - Getting text to scroll at 1/10th speed

本文关键字：速度滚动文本视差更新时间：2023-09-26

我试图让文本以与其父div 相同的速度滚动（以 1/10 的速度滚动）。目前，它正在以正常速度滚动。我做错了什么？

.HTML：

<div id="blank" class="page">
  <p>blah blah blah</p>
</div>

.CSS：

body { background:url(images/background.gif); }
.page {  overflow: auto; width: 580px; color: white; }
#blank { background: url(images/02.jpg) 50% 0 no-repeat fixed; height: 2300px;}

.JS：

$('#blank').parallax("50%", 0, 0.1, true);
$('#blank p').parallax("50%", 0, 0.1, true);

我也从未使用过该插件。没有插件就很简单。

$(document).ready(function(){     
    $(document).scroll(function(){
        var topDist = $(document).scrollTop();
        $('#blank').css('margin-top', (topDist/10)*9);      
    });
});

使用滚动顶部

将为您提供滚动的距离，然后您可以将其添加到边距，顶部位置，左侧位置，BG位置等。希望这有帮助

http://jsfiddle.net/PHHrF/1/