视差滚动(Parallax Scrolling)插件补充
13. Windows
Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件。该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被调用,所以你可以轻松的继承它来自定义导航菜单或更多的东西。下面是一个例子:译者注:点击每个章节,仅Chrome和Safari可用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( '.window' ).<a title= "windows" href= "http://www.woiweb.net/tag/windows" >windows</a>({
snapping: true ,
snapSpeed: 500,
snapInterval: 1100,
onScroll: function (scrollPos){
// scrollPos:Number
},
onSnapComplete: function ($el){
// after window ($el) snaps into place
},
onWindowEnter: function ($el){
// when new window ($el) enters viewport
}
});
|
14. Cool Kitten
Cook Kitten (github) 是一个用于视差滚动网站的响应式的框架,它把你网站中的section组织成一个幻灯片并且使用 jQuery Waypoints 插件来检测它们何时进入到可视区,并触发导航菜单的更新。译者注:点击导航菜单看效果,支持Firefox,Chrom,Opera,Safari,IE9+。
15. Sticky
Sticky (github) 是一个当页面滚动时使你页面上的任何元素始终保持显示的插件,这能使你单页网站展示一个粘性的导航菜单或者分享工具条很便利。 它可直接使用,仅有的选项是顶部的offset:
1
|
$( "#sticker" ).sticky({topSpacing:0});
|
16. Super Scrollorama
Super Scrollorama (github)是一个滚动动画很酷的jQuery插件,它可使你定义当一个元素出现在视图中或特定的滚动点上的tweens和animations。
1
2
3
4
5
|
$(document).ready( function () {
var controller = $.superscrollorama();
controller.addTween( '#fade' ,
TweenMax.from($( '#fade' ), .5, {css:{opacity:0}}));
});
|
17. Stellar.js
Stellar.js (github)是一个对任何滚动元素提供视差滚动效果的jQuery插件,它在特殊元素中寻找任何视差背景和元素,并且当元素滚动时重新放置它们。你可通过使用data 属性控制元素的滚动速度:
1
|
$( '#main' ).stellar();
|
18. Scrollpath
Scrollpath (github)是另一个滚动插件,但与前面的插件有所不同的是你可以自己定义滚动路径。该插件使用canvas的写作风格来绘制路径,使用 moveTo, lineTo 和arc. 为帮助路径正确,在初始化插件时可使带路径的canvas遮罩层。译者注:这个真心赞一下。
参考:
- http://woiweb.iteye.com/blog/1878697
- http://www.woiweb.net/50-amazing-jquery-plugins-2.html
视差滚动(Parallax Scrolling)插件补充相关推荐
- 视差滚动(Parallax Scrolling)效果的原理和实现
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果: ...
- 35+非常棒的视差滚动(Parallax Scrolling)效果WordPress主题
原文地址:http://www.goodfav.com/zh/parallax-scrolling-wordpress-themes-3744.html 视差效果,在网页设计中已成为一个热门的趋势,它 ...
- 【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果
欢迎转载,但请务必注明出处!http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for ...
- 超棒的视差滚动效果javascript类库 - Jarallax
为什么80%的码农都做不了架构师?>>> 日期:2012-9-27 来源:GBin1.com 如果你没有听说过视差滚动的话,说明你真out了,作为2011年最流行的网站设计效 ...
- 实现知乎 Android 客户端启动页视差滚动效果
http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen ...
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站 转载于:https://www.cnblogs.com/momomo/archive/2012/03/02/2377683.h ...
- 视差滚动(Parallax Scrolling)技术在网页中应用的精美案例
视差滚动(Parallax Scrolling)是一种独特的网页内容表现形式,其基本原理是让多层背景以不同的速度移动,形成立体的运动效果,带来出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站 ...
- 让人兴奋的视差滚动(Parallax Scrolling)效果网站分享
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...
- 推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...
最新文章
- Effective C++ 1.0 -- 概述
- python操作mysql的增删改查_详解使用pymysql在python中对mysql的增删改查操作(综合)...
- 【必看】运维是“越老越吃香“的职业?
- visual studio 怎么生成coredump文件_coredump详解
- 语法分析器自动生成工具一览
- JSF基于事件的沟通:过时的方法
- Go语言实现HashSet
- 【Java】封装带有泛型的序列化文件工具类
- FZU_1683 矩阵快速幂 求和
- 计算机英语手抄报活动主题,八一小学举行学生电脑绘画英语手抄报比赛
- 团队协作项目——SVN的使用
- bzoj 2179: FFT快速傅立叶 -- FFT
- Cocos2d-x开发---改变父节点颜色、透明度影响子节点
- HTTP基础知识你知道吗?
- 数字计算机之父——冯·诺依曼
- JAVA中输出分两栏,老司机搞定Java 设置Word分栏
- Apache漏洞汇总:
- 路径名是Linux独有的实现,Linux路径名查找过程分析
- Web应用Word编辑
- Vue的生命周期详解
热门文章
- linux 双通道 磁盘,HP MSA2012SA 双通道 磁盘阵列配置说明 for linuxoracle
- oom linux 导致ssh,Linux OOM
- linux的命令窗口,(翻译)Linux命令行(二)
- maya扇子动画_maya怎么制作一个万箭齐发的效果?
- jQuery插件scrollToTop 4行代码实现网站回到顶部
- kubelet内存异常分析
- 二级c语言评分标准一样吗,计算机二级评分严格吗 步骤错了有分吗
- Linux学习笔记(三)
- java 并发包之 LongAdder 源码分析
- 解决:Whitelabel Error Page This application has no explicit mapping for /error...UnknownHostException