parallax - 在 MaterializeCss 中自定义视差

Question

我正在尝试在实现框架中实现视差效果 http://materializecss.com/parallax.html在我的项目中。我已经能够初始化并实现它。
如何自定义背景图像和内容的速度。

这是我的代码:

<section class="parallax-container">
        <div class="parallax"><img src="/static/images/home/img_background.jpg">
        </div>
        <h2 class="header">Parallax</h2>
        <p class="grey-text">This is going to be my content over image.</p>
</section>

视差初始化:

$(document).ready(function(){
 $('.parallax').parallax();
});

Answer 1

我认为这不是最好的解决方案，但您可以在 materialize.js 中更改视差滚动距离:

var parallax = Math.round((parallax_dist * percentScrolled));

例如使用乘数:

var parallax = Math.round((parallax_dist * percentScrolled * 0.3));