您现在的位置:首页 >> 前端 >> 内容

简单的视觉差页面滚动效果实现教程

时间:2017/10/10 14:18:00 点击:

  核心提示:视觉差滚动效果就是,滚动的时候图片有变化。可以完整的露出图片效果。我不会制作动图,简单结果如下 效果很简单只需要在图片p中添加如下代码:p class=banner keyan style=back...

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

简单的视觉差页面滚动效果实现教程
简单的视觉差页面滚动效果实现教程

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

<p 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="https://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>  

作者:网络 来源:呆瓜丶的菜鸟技术分享