jarallax 库不起作用

Question

您需要在滚动页面时制作视差效果，但脚本不起作用。告诉我是什么原因。文件路径正确。我想在这个页面上做同样的效果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>

Answer 1

问题出在版本 jQuery 中，当使用 jquery/3.2.1 时控制台 "Uncaught TypeError: Cannot set property 'android' of undefined".

出现错误

使用版本 jquery/1.7.1 时一切正常。

jarallax 库不起作用

The jarallax library does not work

javascript

html

css

parallax