在Materialise.css中获取视差效果需要任何特殊图像吗?

时间:2017-04-09 09:02:31

标签: javascript jquery html css materialize

我正在使用Materialize CSS.

我的代码:

<div class="parallax-container">
    <div class="parallax">
        <img src="../../public/assets/img/mount.jpg" />        
    </div>    
</div>

<div class="parallax-container">
    <div class="parallax">
         <img src="http://www.mrwallpaper.com/wallpapers/landscape-georgia.jpg">
     </div>   
</div>

只有第二张图像在滚动时似乎获得了视差效果,而第一张图像似乎以相同的速度移动。 mount.jpg只是我计算机中的随机图像。

当然我在javascript中初始化了视差。

$('.parallax').parallax();

1 个答案:

答案 0 :(得分:1)

我在这里更新你的小提琴https://jsfiddle.net/nmdd876c/2/

一切都很好。我只清理你的html&amp;纠正你的外部资源。

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

我甚至尝试不同的图像&amp;它工作正常。