站内搜索:
首页 >> 前端 >> 内容
简单的视觉差页面滚动效果实现教程

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

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

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

效果很简单只需要在图片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>  

  • 上一篇:Atom怎么选择能显示右侧的行数?
  • 下一篇:CSS样式的initial和inherit跟unset
  • 返回顶部