在MaterialiseCss中自定义视差

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));