Parallax not working in materialize css

问题

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>

回答1:

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

Do not forget to initialize it:

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

回答2:

For me helped adding to style sheets

.parallax{
  position:static;
}

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

回答3:

did you call parallax function?

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

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

回答4:

Please check the following.

Initialize using the Parallax function in JS.

$(document).ready(function(){ $('.parallax').parallax(); });
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 ...
Check the image links
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.

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

回答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.

回答7:

make sure you used "\" and not "/" while mentioning path of image

回答8:

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>

回答9:

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.

来源：https://stackoverflow.com/questions/31232539/parallax-not-working-in-materialize-css

标签

javascript

html5

cordova

parallax