视差滚动(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遮罩层。译者注:这个真心赞一下。

Scrollpath

参考:

  • http://woiweb.iteye.com/blog/1878697
  • http://www.woiweb.net/50-amazing-jquery-plugins-2.html

转载于:https://www.cnblogs.com/JoannaQ/p/3302535.html

猜你喜欢

转载自blog.csdn.net/weixin_34268310/article/details/93056801