视差滚动(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,一经查实,立即删除!

相关文章

主流浏览器内核

IE trident Firefox Gecko Google chrome Webkit/blink Safar i Webkit Opera presto转载于:https://www.cnblogs.com/codezhao/p/10451030.html

Quartz使用总结、Cron表达式

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Quartz可以用来做什么&#xff1f; Quartz是一个任务调度框架。比如你遇到这样的问题 想每月25号&#xff0c;信用卡自动还款想每年4月…

股票数据库建立

import akshare as ak import baostock as bs import pandas as pd import datetime bs.login()stk_list_place D:/stk_list.csv #股票代码表存储地址 stk_place D:/Data/ #股票数据存储地址 def update_stk_list(dateNone):#获取指定日期的指数、股票数据stock_rs bs.qu…

利用redis实现分布式锁:加锁与解锁

待补充转载于:https://www.cnblogs.com/csuliujia/p/10451462.html

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

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

多股回测(backtrader+quantstats+akshare)

导包 #引入技术指标数据 from __future__ import (absolute_import ,division,print_function,unicode_literals) import datetime #用于datetime对象操作 import os.path #用于管理路径 import sys #用于在argvTo[0]中找到脚本名称 import backtrader as bt #引入backt…

Cron表达式、定时任务

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 Cron表达式。但这个表示式本身就够复杂了。下面会有说明。 例子&#xff1a; cronSchedule("0 0/2 8-17 * * ?") // 每天8:0…

【转载】ASP.NET自定义404和500错误页面

在ASP.NET网站项目实际上线运行的过程中&#xff0c;有时候在运行环境下会出现400错误或者500错误&#xff0c;这些错误默认的页面都不友好&#xff0c;比较简单单调&#xff0c;其实我们可以自行设置这些错误所对应的页面&#xff0c;让这些错误跳转到我们指定的路径。此文将介…

年薪15万的80后小本科:只要6分钟,告诉你少走6年弯路

这个社会是很残酷的&#xff0c;尤其是对于那些刚刚步入社会的80后而言。当很多人都在抱怨这个社会竞争压力太大、没有自己的追求&#xff0c;并因此而丧失斗志的时候&#xff0c;一个年薪15W的80后小本却发出了这个的感慨&#xff0c;“一个人的成就&#xff0c;与岁月无关&am…

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

quartz各版本MySQL数据库存储建表SQL语句

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 用quartz管理任务计划很方便&#xff0c;但是当使用数据库作为存储介质的时候&#xff0c;必须要先创建表&#xff0c;不然就会报错。1.…

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

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

对话Linus Torvalds:大多黑客甚至连指针都未理解

摘要&#xff1a;Linus Torvalds坦言那些狡诈的通过文件名查找高速缓存&#xff0c;然后又抱怨自己能力一般的内核“恶魔”才是他欣赏的&#xff1b;相反&#xff0c;很多人连低水平的内核编程都还没学好。 几周前&#xff0c; Linus Torvalds在Slashdot上回答了一些问题。其中…

总结学习(提纲)

之前在私募做期权量化学习了那么久&#xff0c;趁着毕业找工作这段时间&#xff0c;对之前学习的东西&#xff0c;制作的函数等进行一个系统性的总结&#xff0c;顺便每天更新的时候&#xff0c;记录下自己的体重与波比跳次数。 1.MC的学习与策略编写 2.python基础学习资料的…

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

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

js关于表单校验完善

<!DOCTYPE html><html> <head> <meta charset"UTF-8"> <title>注册页面</title> <style type"text/css"> .left{ width: 100px; …

Python高效编程技巧

摘要&#xff1a;作者有多年的Python编程经验&#xff0c;并且有很多的编程小技巧和知识&#xff0c;其中大多数是通过阅读很流行的开源软件&#xff0c;如Django, Flask, Requests中获得的。 我已经使用Python编程有多年了&#xff0c;即使今天我仍然惊奇于这种语言所能让代码…

quartz 任务调试 建表 sql 语句、create table语句

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 DROP TABLE IF EXISTS QRTZ_FIRED_TRIGGERS; DROP TABLE IF EXISTS QRTZ_PAUSED_TRIGGER_GRPS; DROP TABLE IF EXISTS QRTZ_SCHEDUL…

关于ttk的使用与安装

ttk是tkinter中的子模块&#xff0c;在python2.x中是作为独立模块。但是在python3.x中则是成为了tkinter的子模块&#xff0c;因此调用时&#xff0c;转变为 from Tkinter import ttk