个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
需要在滚动页面时制作视差效果，但脚本不起作用。告诉我这是什么原因。文件路径是正确的。我想在这个页面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>最佳答案
问题出在 jQuery 版本中，当使用 jquery/3.2.1 时，控制台中出现错误“Uncaught TypeError: Cannot set property 'android' of undefined”。
当使用版本 jquery/1.7.1 时，一切正常。
关于javascript - jarallax 库不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47174742/
24
4
0
需要在滚动页面时制作视差效果，但脚本不起作用。告诉我这是什么原因。文件路径是正确的。我想在这个页面http://www.jarallax.com/demo3/#上做出同样的效果
我有以下代码: 并且出于某种原因，我无法使其像 MDB 示例 (https://mdbootstrap.com/previews/docs/latest/html/parallax/index.
大家好，新年快乐，我将 slick jarallax javascript 库一起用于视差图像 slider 。图像充当背景并处于背景大小:封面模式。当浏览器从全尺寸恢复到原来的尺寸，然后稍微增加其宽
我是一名优秀的程序员,十分优秀！