简单的视觉差页面滚动效果

最新推荐文章于 2024-05-20 08:45:00 发布

原创最新推荐文章于 2024-05-20 08:45:00 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#视觉差滚动 HTML5

菜鸟心得专栏收录该内容

20 篇文章

订阅专栏

视觉差滚动效果就是，滚动的时候图片有变化。可以完整的露出图片效果。我不会制作动图，简单结果如下

效果很简单只需要在图片div中添加如下代码：

<div class="banner keyan" style="background: url(image/bg3.png) no-repeat 0px 0px; min-height: 440px; background-size:cover;" data-stellar-background-ratio="0.5">

并且引用js

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>

同时写入js

 <script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$.stellar({
    horizontalScrolling: false,
    responsive: true
});
});//]]>

    </script>

stellar的下载地址