视差滚动(Parallax Scrolling)插件补充-白红宇

视差滚动(Parallax Scrolling)插件补充

阅读量：6716 次

发布时间：2019-06-25

本文共 1395 字，大约阅读时间需要 4 分钟。

13. Windows

() 是一个让你用占据整个屏幕的section来构建单面网站的插件。该插件提供给你一些回调函数，当新的section出现在可视区并且并且处理快照时被调用，所以你可以轻松的继承它来自定义导航菜单或更多的东西。下面是一个例子：译者注：点击每个章节，仅和Safari可用。

                         
$(
'.window'
).<a title=
"windows"
href=
""
>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

() 是一个用于视差滚动网站的响应式的框架，它把你网站中的section组织成一个幻灯片并且使用插件来检测它们何时进入到可视区，并触发导航菜单的更新。译者注：点击导航菜单看效果，支持,Chrom,Opera,Safari,IE9+。

15. Sticky

() 是一个当页面滚动时使你页面上的任何元素始终保持显示的插件，这能使你单页网站展示一个粘性的导航菜单或者分享工具条很便利。它可直接使用，仅有的选项是顶部的offset：

                         
$(
"#sticker"
).sticky({topSpacing:0});

16. Super Scrollorama

()是一个滚动动画很酷的jQuery插件，它可使你定义当一个元素出现在视图中或特定的滚动点上的tweens和animations。

                         
$(document).ready(
function
() { 
  
var
controller = $.superscrollorama();
  
controller.addTween(
'#fade'
,
    
TweenMax.from($(
'#fade'
), .5, {css:{opacity:0}}));
});
        
      

17. Stellar.js

()是一个对任何滚动元素提供视差滚动效果的jQuery插件，它在特殊元素中寻找任何视差背景和元素，并且当元素滚动时重新放置它们。你可通过使用data 属性控制元素的滚动速度：

                         
$(
'#main'
).stellar();

18. Scrollpath

()是另一个滚动插件，但与前面的插件有所不同的是你可以自己定义滚动路径。该插件使用canvas的写作风格来绘制路径，使用 moveTo, lineTo 和arc. 为帮助路径正确，在初始化插件时可使带路径的canvas遮罩层。译者注：这个真心赞一下。

参考：

http://woiweb.iteye.com/blog/1878697

http://www.woiweb.net/50-amazing-jquery-plugins-2.html

转载地址：http://sekmo.baihongyu.com/

你可能感兴趣的文章

《Python自动化运维：技术与最佳实践》一2.4　探测Web服务质量方法