You need to make a parallax effect when scrolling the page, but the script does not work. Tell me what's the reason. The file paths are correct. I want to make the same effect on this page http://www.jarallax.com/demo3/#
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Landing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header" class="block">
<h1>Lorem ipsum dolor sit amet.</h1>
</div>
<div id="main" class="block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quia magnam voluptatibus quis, quas et repudiandae, facere soluta omnis, pariatur voluptates quo molestiae nulla ab recusandae reprehenderit? Quam, unde! Quos neque optio porro mollitia
rerum ut. Temporibus dolor quis quo distinctio reprehenderit quas, laudantium obcaecati consequatur labore pariatur quisquam esse?</p>
</div>
<div id="team" class="block">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium qui numquam provident facere quam fugit, ex corrupti reprehenderit veritatis praesentium iste placeat? Quidem, id fugiat?</p>
</div>
<div id="footer" class="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, sequi?
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://jarallax.com/download/jarallax-0.2.4b.min.js"></script>
<script>
$(document).ready(function() {
var jarallax = new Jarallax(new ControllerScroll(true));
var animation = jarallax.addAnimation('#header', [{
progress: '0',
opacity: '0',
top: '100%'
},
{
progress: '10',
opacity: '1',
top: '40%'
},
{
progress: '20',
opacity: '0',
top: '0%'
}
]);
jarallax.cloneAnimation('#main', {
progress: '+10'
}, animation);
jarallax.cloneAnimation('#team', {
progress: '+20'
}, animation);
jarallax.cloneAnimation('#footer', {
progress: '+30'
}, animation);
});
</script>
</body>
</html>
Problem is in version jQuery, when use jquery/3.2.1 then is error in console "Uncaught TypeError: Cannot set property 'android' of undefined".
When use version jquery/1.7.1 all work correct.