视差滚动(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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/449784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MVC日期格式化,后台使用Newtonsoft.Json序列化日期,前端使用”f”格式化日期

MVC控制器中&#xff0c;经常使用Newtonsoft.Json把对象序列化成json字符串传递到前端视图。当对象中有DateTime类型的属性时&#xff0c;前后台如何处理才能把DateTime类型转换成想要的格式呢&#xff1f; 有这样的一个类具有DateTime类型属性&#xff1a; using System; name…

Google Go Programming In Eclipse

http://www.tutorialsavvy.com/2013/04/google-go-programming-in-eclipse.html/ Google Go Programming In Eclipse The new “Go” programming language is from Google co.It has many features better then other languages.Go language features are:-– High Speed Comp…

pycharm打开ipynb显示为文本格式解决办法

然后进入 添加类型 jupyter notebook 然后下方添加 *.ipynb

[基础篇]ESP32-RTOS-SDK教程(一)之Windows环境搭建

当下正是物联网最好的时代&#xff0c;学习新的技术怎么能只学习ESP8266呢&#xff1f;要知道ESP8266还有一个孪生兄弟呢&#xff0c;最重要的是这个孪生兄弟要比ESP8266是更厉害的&#xff0c;所以我们也是非常有必要学习一下的&#xff0c;其实这篇文章去年就已经写了&#x…

安卓系统上的远程 JS 调试 Remote JavaScript Debugging on Android

每当在 Android 移动设备上调试网页时&#xff0c;开发人员往往都会不自觉陷入调试的泥潭中去。《Android开发指南》提供了一个解决方案&#xff0c;却有点繁琐复杂。因此&#xff0c;许多 Web 开发人员会倾向于使用类似 Firefox Firebug 的或像 WebKit 的 Web Inspector 之类的…

SEO艺术

SEO艺术 编辑推荐 在本书中&#xff0c;四位搜索引擎优化&#xff08;SEO&#xff09;领域最受瞩目的专家阐述了制订以及执行一个完善的SEO策略时应遵循的一些实用指南与最新技术。 基本信息 原书名&#xff1a; The Art of SEO原出版社&#xff1a; OReilly作者&#xff1a; (…

http状态码301和302详解及区别

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一直对http状态码301和302的理解比较模糊&#xff0c;在遇到实际的问题和翻阅各种资料了解后&#xff0c;算是有了一定的理解。这里记录下…

哪些编程语言需要修复?

摘要&#xff1a;编程语言有十全十美的吗&#xff1f;每种语言都有缺陷吗&#xff1f;这不&#xff0c;Java、C、C、Python都中枪了。语言之间也可相互“掐架”&#xff0c;一起来看下。 原文作者Kevin Kelleher采用一种比较新颖的方式来比较编程语言&#xff1a;即描述每个编程…

Python标准库

《Python标准库》基本信息原书名&#xff1a; The Python Standard Library by Example 原出版社&#xff1a; Pearson Education 作者&#xff1a; (美)Doug Hellmann 译者&#xff1a; 刘炽 出版社&#xff1a;机械工业出版社 ISBN&#xff1a;9787111378105上架时间&#xf…

Perl迎来25岁生日

摘要&#xff1a;Perl迎来了它的第25岁生日&#xff0c;普天下Perlist都冒泡同庆一下&#xff0c;很多开发者喜欢它的理由是因其具备强力、稳定、成熟、可移植性等特点&#xff0c;Perl的爱好者们赶快送上你的祝福吧&#xff01; 昨天&#xff0c;Perl迎来了它的第25岁生日&…

20165114 《网络对抗技术》 Exp0 Kali安装与配置 Week1

目录&#xff1a; 一、kail的下载与安装 二、kali的网络设置 三、安装vmware-tools。 四、更新软件源。 五、共享文件夹 六、安装中文输入法 一、kail的下载与安装 VMware workstation的安装 因为之前的课程已经涉及&#xff0c;所以本机已经安装好了VMware workstation&#x…

大数据:互联网大规模数据挖掘与分布式处理

《大数据:互联网大规模数据挖掘与分布式处理》基本信息原书名&#xff1a;Mining of Massive Datasets作者&#xff1a; (美)拉贾拉曼(Rajaraman,A.) (美)厄尔曼(Ullman,J.D.) [作译者介绍]译者&#xff1a; 王斌丛书名&#xff1a; 图灵程序设计丛书出版社&#xff1a;人民邮电…

SpringCloud框架搭建+实际例子+讲解+系列五

&#xff08;4&#xff09;服务消费者&#xff0c;面向前端或者用户的服务 本模块涉及到很多知识点&#xff1a;比如Swagger的应用&#xff0c;SpringCloud断路器的使用&#xff0c;服务API的检查、token的校验&#xff0c;feign消费者的使用。大致代码框架如下&#xff1a; 先…

软件开发者最重要的四大技能

摘要&#xff1a;现如今&#xff0c;可供选择的技术、语言及平台可谓五花八门&#xff0c;因此要弄明白哪里是花时间训练的最佳投资点也就难上加难…… 现如今&#xff0c;可供选择的技术、语言及平台可谓五花八门&#xff0c;因此作为软件开发者&#xff0c;要弄明白哪里是花时…

Java 12 将于3月19日发布,8 个最终 JEP 一览

开发四年只会写业务代码&#xff0c;分布式高并发都不会还做程序员&#xff1f; JDK 12 已于2018年12月进入 Rampdown Phase One 阶段&#xff0c;这意味着该版本所有新的功能特性被冻结&#xff0c;不会再加入更多的 JEP 。该阶段将持续一个月&#xff0c;主要修复 P1-P3 级…

股票期货数据的resample处理

​ import pandas as pd stock_day pd.read_csv("stock_day.csv") stock_day stock_day.sort_index() # 对每日交易数据进行重采样 &#xff08;频率转换&#xff09; stock_day.index# 1、必须将时间索引类型转换成Pandas默认的类型 stock_day.index pd.to_datet…

程序员如何做出“不难看”的设计

摘要&#xff1a;程序员在写代码的时候往往只注重功能的实现和性能的提升&#xff0c;忽视了外观和易用性&#xff0c;其实很多时候只要注意一些基本的规则&#xff0c;就可以大幅度提高产品的观感。 经常看到程序员展示自己做的东西&#xff0c;有一些是创业项目&#xff0c;有…

微服务实战(二):使用API Gateway

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 当你决定将应用作为一组微服务时&#xff0c;需要决定应用客户端如何与微服务交互。在单体式程序中&#xff0c;通常只有一组冗余的或者…

五步让你成为专家级程序员

摘要&#xff1a;Mark Lassoff是一位高级技术培训师&#xff0c;从事培训工作已有10余年。他培训的客户包括美国国防部、Lockheed Martin等。在多年的培训生涯中&#xff0c;他总结了一些如何快速学习一门语言的技巧&#xff0c;这些技巧非常简单&#xff0c;但是却让人受益匪浅…

Laravel 使用 Aliyun OSS 云存储

对象存储 ( Object Storage Service, 简称 OSS ) OSS 相信大家都听过, 它是阿里云对外提供的海量, 安全和高可靠的云存储服务. 大家可以把自己网站的资源存上面加快自己网站速度, aliyun 官网也有文档不过对于新手来说有点难, 那么这里我给大家推荐一个组件和组件的使用. johnl…