4

I am trying to implement parallax effect in materialize framework http://materializecss.com/parallax.html in my project. I have been able to initialize and implement it. How can I customize the speed of background image and content over it.

Here's my code :

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

Parallax Initialization :

$(document).ready(function(){
 $('.parallax').parallax();
});
Himanshu Mittal
  • 794
  • 6
  • 19

1 Answers1

2

I think it is not the best solution, but you can change the parallax scroll distance in materialize.js:

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

for example with a multiplier:

var parallax = Math.round((parallax_dist * percentScrolled * 0.3));
Alex
  • 21
  • 2