1
ページをスクロールするときに視差効果を作成する必要がありますが、スクリプトは機能しません。理由を教えてください。ファイルパスは正しいです。 私が使用jqueryの/ 3.2.1は、コンソール「キャッチされない例外TypeErrorに誤りであるとき問題は、バージョンのjQueryであるhttp://www.jarallax.com/demo3/#jarallaxライブラリが機能しない
<!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>
コンソールログを確認してください – Pedram