Parallax isn't working for me

Beginners
1

I added a paralla code to my page, but the images don’t appear, when I remove the class “parallax” from container of the image, images appear but without the parallax effect,

  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.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="content/img/wood.jpg"></div>
  </div>


<script type="text/javascript">
var elem = document.querySelector('.parallax');
var instance = M.Parallax.init(elem, options);

// Or with jQuery

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

</script>

and these are the libraries I added

  <script src="app\lib\angular.min.js"></script>
  <script src="app\lib\angular-route.min.js"></script>
  <script src="app\lib\angular-aria.min.js"></script>
  <script src="app\lib\angular-messages.min.js"></script>
  <script src="app\lib\angular-animate.min.js"></script>
  <link rel="stylesheet" href="app\lib\angular-material.min.css">
  <script src="app\lib\angular-material.min.js"></script>
  <link rel="stylesheet" href="content/css/styles.css">
  <!--Materialize-->
  <link href="materialize\css\icon.css" rel="stylesheet">
  <link rel="stylesheet" href="materialize/css/materialize.min.css">
  <link rel="stylesheet" href="app\lib\Roboto.css">
  <script src="app\app.js"></script>
<script type="text/javascript" src="materialize\js\jquery.3.2.1.min.js"></script>
   <script src="materialize\js\materialize.min.js"></script>
2

Welcome to the Pinegrow forums @aymen

Your setup looks to be ok, but are you calling your initialization after you reference the scripts? Without seeing the page itself that is my first guess.

3

Just to add… as you are using multiple instances of the class parallax, you would need to use document.querySelectorAll('.parallax')

4

You might just need to refresh the page in Pinegrow if you added all the above already

5

I think the library itself handles that once you pass in your reference, but I could be mistaken.

6

I had a minute so …

On the most basic level it does work with all the base libraries you showed you have loaded. There appears to be no conflicts and it is working.

In re-looking at your original post you have two initialization setups listed with an “or” between them. I am assuming you were showing things you tried and were not in fact actually using both together. The first being plain JS and the other using JQuery. If you are loading JQuery then you can just use that to initialize things.

Here is a basic working example with the libraries you listed:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.8/angular-material.min.css" />
<style type="text/css">
.parallax-container {
    height: 800px;
}
.blank-container {
	background-color: lightgrey;
    height: 800px;
}
#loading {
 	top:0px
 	left:0px;
 	padding:0;
 	margin:0;
 	width:100%;
 	height:100%;
 	position:fixed;
 	background-color: white;
}
</style>
</head>
<body>
<div id="loading"></div>
<div class="parallax-container">
      <div class="parallax"><img src="https://source.unsplash.com/random/1920x1080?sig=1"></div>
</div>
<div class="blank-container"></div>
<div class="parallax-container">
     <div class="parallax"><img src="https://source.unsplash.com/random/1920x1080?sig=2"></div>
</div>
<div class="blank-container"></div>
<div class="parallax-container">
      <div class="parallax"><img src="https://source.unsplash.com/random/1920x1080?sig=3"></div>
</div>
<div class="blank-container"></div>
<div class="parallax-container">
      <div class="parallax"><img src="https://source.unsplash.com/random/1920x1080?sig=4"></div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.8/angular-material.min.js"></script>
<script type="text/javascript">
$(window).on("load", function(){
   $.ready.then(function(){
		$('.parallax').parallax();
    	$('#loading').fadeOut(800);
   });
})
</script>
</body>
</html>

So your problem perhaps is somewhere else in your: app.js , style.css, etc., its nothing specific with Pinegrow and will be difficult for anyone to diagnose here.