实用资源简单大气的全屏网页滚动效果实现方法

简单大气的全屏网页滚动效果实现方法

全屏网页滚动效果可以用在企业网站的首页用于展示品牌介绍,也可以用于教程类的页面用于展示每个步骤,比如百度经验就使用了类似的效果,用户通过滚动鼠标或使用键盘方向键控制网页版面的滚动是很好的体检,目前实现全屏滚动效果的方法很多,本文主要简单的介绍一下实现该效果的pagePiling插件:

全屏网页滚动效果.gif

使用该插件需要先引入它的CSS样式:

<link rel="stylesheet" href="css/jquery.pagepiling.css">

网页底部body标签内引入Jquery库以及pagepiling.js文件:

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>

示例网页body部分代码如下:

<div id="all">
 <div class="section"><h3>第一章</h3><p>一元一次方程</p></div>
 <div class="section"><h3>第二章</h3><p>几何图形认识初步</p></div>
 <div class="section"><h3>第三章</h3><p>相交线与平行线</p></div>
 <div class="section"><h3>第四章</h3><p>平面直角坐标系</p></div>
</div>
<script>
$(function(){
 $('#all').pagepiling({
  sectionsColor: ['#00d8cc','#00c13f','#0484b2','#5f0466'], //设置每屏的背景颜色
  verticalCentered:true, //表示是否垂直居中
  direction:'vertical' //默认竖向滚动,若设置horizontal则表示横向滚动
 });
});
</script>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/131.html