Parallax not working in materialize css

Question

I am using the Materialize Framework to create a PhoneGap app.

http://materializecss.com

They have a parallax setting which you can see their notation here:

http://materializecss.com/parallax.html

When I run it, my image does not show up at all. My html looks like this:

<div class="row">
  <div class="col s12 m7">
    <div class="card">

      <div class="parallax-container" style = "height:100px;">
        <div class="parallax"><img src="/img.png"></div>
      </div>

      <div class="card-content">
        <h5> test</h5>
        <h6> test</h6>
        <h6> test </h6>
        </br>
        <p> test</p>
      </div>

      <div class="card-action">
        <a href="#">This is a link</a>
      </div>

    </div>
  </div>
</div>

Answer 1

Look my example: http://jsfiddle.net/yhgj48tr/

Do not forget to initialize it:

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

Answer 2

For me helped adding to style sheets

.parallax{
  position:static;
}

because before it was on "absolute" and it spoiled parallax :)

Answer 3

did you call parallax function?

$('.parallax').parallax();

works fine for me. codepen [example]: http://codepen.io/anon/pen/BNrorz

Answer 4

Please check the following.

1. Initialize using the Parallax function in JS.

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

2. Check if the Jquery is declared first in the import before Materialize JS.

   ... "text/javascript" src="jquery-2.1.4.min.js" ...

   ... "text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js ...

3. Check the image links

4. Check the <div>

Here's a blog post where I created Parallax using Materialize CSS. https://cmsoftwaretech.wordpress.com/2015/08/10/parallax-webpage-effect-using-materialize-css/

The codes are shown.

Answer 5

i have solution for this problem, you can't enter a local picture on your source but you must enter the external link, *for example : *

<div class="parallax-container>
<div class="parallax">
<img src="http://wallpapercave.com/wp/JRiV1lH.png">
</div>
</div>

this is work for me

Answer 6

Be careful with where in DOM you've parallax HTML specified. I've just debugged issue where we had right HTML, we had right JavaScript code, but the problem was location of the HTML in DOM structure. Try to move parallax related HTML higher in DOM structure to see if it fixes your problem.

Answer 7

确保在提及图像路径时使用“\\”而不是“/”

Answer 8

Use this jQuery or JavaScript to add parallax effect

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });

  // Or with jQuery

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

Source

Do remember to import jQuery before materialize.min.js

Answer 9

My answer is a bit late, but I had the same problem with the version I downloaded from their site.

Check the script tags.

<script src="../../dist/js/materialize.js"></script>

should just be...

<script src="js/materialize.js"></script>

Answer 10

I was having a similar problem, but I solved it when I adjusted the order in which I was calling my JavaScript libraries in the head. I needed to call my jquery library first, then call my Materialize links.