HTML & CSS » jQuery实现全屏幻灯片的滚动页面效果

jQuery实现全屏幻灯片的滚动页面效果

发表于: HTML & CSS. 评论 (5)
Sponsor

近期苹果推出了新的iPhone 5S手机,其官方页面使用了类似全屏幻灯片那样的展示方式,并通过垂直滚动来实现切换,从而实现漂亮的视觉效果,一看就能吸引用户。图1为Apple iPhone 5s官方页面的截图。

fullscreen-scroll-page-01

今天设计达人发现了这个用jQuery来实现全屏幻灯片的滚动页面效果,大家先看看演示吧,点击下面链接。

在线演示:查看DEMO

插件下载页:https://github.com/peachananr/onepage-scroll

fullscreen-scroll-page-02

页面大小是根据浏览器大小而变化,并可以通过鼠标中键来滚动页面,视觉效果非常佳。

fullscreen-scroll-page-03

这个jQuery滑动效果是使用CSS3的easing动画,所以我们在代码上可以用「ease」「ease-in」「ease-out」「linear」等效果。

fullscreen-scroll-page-04

使用方法

Step1: 加载外部文件

这里我们需要加载新版的jQuery库和该插件及样式文件(jquery.onepage-scroll.js、onepage-scroll.css)至网页头部。

<head>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.onepage-scroll.js"></script>
<link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
</head>

Step2: HTML代码

<body>
...
<div class="main">
<section>...</section>
<section>...</section>
...
</div>
...
</body>

Step3: jQuery

大家可以根据提示自行修改属性。

$(".main").onepage_scroll({
sectionContainer: "section", // 这个是可以改变的,比如你用DIV代替也可以。
easing: "ease", // 使用 CSS3 easing 动画,比如 "ease", "linear", "ease-in", "ease-out", "ease-in-out",  "cubic-bezier(0.175, 0.885, 0.420, 1.310)"等等。
animationTime: 1000, // 动画时间控制
pagination: true, // 这个用来控制焦点(导航)显示, true为显示, false为隐藏。
updateURL: false // URL地址切换。
});
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论5 Responses to “jQuery实现全屏幻灯片的滚动页面效果”

  1. 徐冬冬 - 回复

    为什么IE9都不兼容

  2. jhlmsx - 回复

    这个页面加载慢如何解决?

  3. 木有咋果必要了吧 - 回复

    苹果这个随页面载入模块元素从左右进入屏幕的效果是怎么实现的?

  4. 颛泷 - 回复

    ie8和7都不兼容section改成div无法运行邮箱longlong3815@163.com

  5. Hi-SB - 回复

    不错不错!!给个赞


{ 发表评论 }