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)插件补充相关推荐

  1. 视差滚动(Parallax Scrolling)效果的原理和实现

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果: ...

  2. 35+非常棒的视差滚动(Parallax Scrolling)效果WordPress主题

    原文地址:http://www.goodfav.com/zh/parallax-scrolling-wordpress-themes-3744.html 视差效果,在网页设计中已成为一个热门的趋势,它 ...

  3. 【Parallax Animation】实现知乎 Android 客户端启动页视差滚动效果

    欢迎转载,但请务必注明出处!http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for ...

  4. 超棒的视差滚动效果javascript类库 - Jarallax

    为什么80%的码农都做不了架构师?>>>    日期:2012-9-27  来源:GBin1.com 如果你没有听说过视差滚动的话,说明你真out了,作为2011年最流行的网站设计效 ...

  5. 实现知乎 Android 客户端启动页视差滚动效果

    http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-screen ...

  6. 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站

    30个让人兴奋的视差滚动(Parallax Scrolling)效果网站 转载于:https://www.cnblogs.com/momomo/archive/2012/03/02/2377683.h ...

  7. 视差滚动(Parallax Scrolling)技术在网页中应用的精美案例

    视差滚动(Parallax Scrolling)是一种独特的网页内容表现形式,其基本原理是让多层背景以不同的速度移动,形成立体的运动效果,带来出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站 ...

  8. 让人兴奋的视差滚动(Parallax Scrolling)效果网站分享

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...

  9. 推荐六款帮助你实现惊艳视差滚动效果的 jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是"改变".在网页设计中,视差滚动(Pa ...

最新文章

  1. Effective C++ 1.0 -- 概述
  2. python操作mysql的增删改查_详解使用pymysql在python中对mysql的增删改查操作(综合)...
  3. 【必看】运维是“越老越吃香“的职业?
  4. visual studio 怎么生成coredump文件_coredump详解
  5. 语法分析器自动生成工具一览
  6. JSF基于事件的沟通:过时的方法
  7. Go语言实现HashSet
  8. 【Java】封装带有泛型的序列化文件工具类
  9. FZU_1683 矩阵快速幂 求和
  10. 计算机英语手抄报活动主题,八一小学举行学生电脑绘画英语手抄报比赛
  11. 团队协作项目——SVN的使用
  12. bzoj 2179: FFT快速傅立叶 -- FFT
  13. Cocos2d-x开发---改变父节点颜色、透明度影响子节点
  14. HTTP基础知识你知道吗?
  15. 数字计算机之父——冯·诺依曼
  16. JAVA中输出分两栏,老司机搞定Java 设置Word分栏
  17. Apache漏洞汇总:
  18. 路径名是Linux独有的实现,Linux路径名查找过程分析
  19. Web应用Word编辑
  20. Vue的生命周期详解

热门文章

  1. linux 双通道 磁盘,HP MSA2012SA 双通道 磁盘阵列配置说明 for linuxoracle
  2. oom linux 导致ssh,Linux OOM
  3. linux的命令窗口,(翻译)Linux命令行(二)
  4. maya扇子动画_maya怎么制作一个万箭齐发的效果?
  5. jQuery插件scrollToTop 4行代码实现网站回到顶部
  6. kubelet内存异常分析
  7. 二级c语言评分标准一样吗,计算机二级评分严格吗 步骤错了有分吗
  8. Linux学习笔记(三)
  9. java 并发包之 LongAdder 源码分析
  10. 解决:Whitelabel Error Page This application has no explicit mapping for /error...UnknownHostException