Search code examples
cssparallaxmaterialize

Parallax from Materialize no showing image

Im using Materialize CSS and im trying to use the Parallax.

I followed the instructions: http://materializecss.com/parallax.html

But when i save, no image is shown.

Here is the codepen: https://codepen.io/wecarrasco/pen/qmxMox

    <div class="parallax-container">
    <div class="parallax"><img src="http://www.mrwallpaper.com/wallpapers/landscape-georgia.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="\wecarrasco.github.io/computer.jpg"></div>
  </div>

And the script:

<script>
    $(document).ready(function(){
      $('.parallax').parallax();
    });
</script>

Thanks!

Solution

  • The images are working fine now. Here is the link to my demo, which i forked from yours https://codepen.io/nirajtech/pen/jmKNpr

    The problem was you didn't include the two js file required to trigger the parallax. first one jquery and second is materialize.js

    The link of both js is provided below:

    1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

    2. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js

    Remeber to include jquery first and then materialize otherwise you will face problem.