Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 976
Mike Avatar asked Jul 05 '15 16:07

Mike


2 Answers

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

Do not forget to initialize it:

$(document).ready(function(){
  $('.parallax').parallax();
});
like image 60
Guilherme Natal de Mello Avatar answered Nov 14 '22 09:11

Guilherme Natal de Mello


For me helped adding to style sheets

.parallax{
  position:static;
}

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

like image 4
Skylin R Avatar answered Nov 14 '22 10:11

Skylin R