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：无法设置属性'android'的undefined”。

使用版本jquery / 1.7.1时，所有工作都正确。

jarallax库不起作用

1 个答案: