我知道Jarallax alos的视差效果适用于iOS设备。但是在我的codepen示例中,这并没有成功。
我已经将推荐的cdn:s用于必要的js库:
HTML
<div class="jarallax">
<img class="jarallax-img" src="https://i.pinimg.com/originals/d2/0a/43/d20a439f0a4957ebb583205d03914aec.jpg" alt="">
<div class="demo-table">
<div class="demo-table-cell">
<h1>Jarallax</h1>
</div>
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quidem incidunt illo magni, suscipit ad deserunt minima a ipsa distinctio aut fugiat dolore soluta amet tempore, non atque laborum repudiandae necessitatibus natus nihil possimus. ...</p>
</div>
<div class="jarallax">
<img class="jarallax-img" src="http://3.bp.blogspot.com/-xh9JlLnpuHo/UQaa9W7pDdI/AAAAAAAAL6g/6sQdImTSoYM/s1600/wallpaper-of-a-tiger-swimming-underwater.jpg" alt="">
</div>
<script type="text/javascript">
// object-fit polyfill run
objectFitImages();
/* init Jarallax */
jarallax(document.querySelectorAll('.jarallax'), {
noIos: false,
});
jarallax(document.querySelectorAll('.jarallax-keep-img'), {
keepImg: true,
});
</script>
我在代码中遗漏了什么,因为Jarallax的演示页面也适用于iOS设备。