html5视差滚动效果,视差滚动效果

e971d04f514e073efa59c84cdbd4f313.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:制作视差滚动效果

The meat and potatoes. Invoking these will move that page in from that side.

parallax.bar.left(); //Bar slides in from the left

parallax.foo.top(); //bringing back foo from the top

parallax.bar.bottom(IAmBack()); //We got callbacks too ;)

functon IAmBack(){

alert("I'm back foo!");

}

# Show and Hide

Sometimes we don't need the fanciness. Show and hide simply bring pages to focus instantly, or hides them.

//All pages start out hidden,

//remember to show your initial page!

parallax.foo.show();

parallax.bar.hide(); //Bar is being a tad shy

# Last and Current

Parallax.js has two special pages that it fills in for you. You can use that just like regular pages.

parallax.bar.left()

parallax.current.ackbar(); //Bar thinks it's a trap!

parallax.foo.top();

parallax.current.ackbar(); //Foo now thinks it's a trap

parallax.last.right(); //Bar slides in from the right

# OnLoad and Preload

Sometimes your page just has to run some code when it hits the big screen. We understand. Preload runs before the page animation, onload runs after.

parallax.bar.onload = function(){

alert( "sweetest function eva!");

};

parallax.bar.left(); //Fires that function!

parallax.bar.show(); //Also fires it, how cool!

//parallax itself has it's own preload and onload functions

parallax.preload = function(){

//these get run on -every- page,

//in addition to the page's onload/preload functions

alert("Super annoying alert");

};

# Protips!

//Remember parallax can be aliased!

p = parallax;

//Using arrow key navigation is super cool

//most users find it very intuitive

$(document).keydown(function(e){

if (e.keyCode == 37) { //this is the left key,

p.bar.left();

}

}); //check out the code of this demo, it has arrow key navigation!

//For reference; 38 - top, 39 - right, 40 - bottom

//Before using .last either check to see if it's null

if(typeof p.last === 'undefined'){

//handle it here

}

//or set it before hand

p.last = p.foo;

//Movement callbacks and .onload look like they do the same thing

//But they don't!

p.bar.onload = herp();

p.bar.left(derp()); //both herp and derp get run

p.current.show() //only herp gets run

Godspeed.

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

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

相关文章

Oracle--基础

Oracle数据库的体系结构 数据库: databaseOracle数据库是数据的物理存储,和mysql不一样的是,只要我们愿意,我们就可以在mysql下创建任意的数据库,每个新项目的启动,创建一个数据库,然后通过showdatabases可以查看到全部数据库,但是Oracle的数据库是一个操作系统只有一个库,说白…

python自动化测试常见面试题二_思考|自动化测试面试题第二波

本内容为企业面试关于自动化测试的考题,大家可以自己思考下如何作答,欢迎把答案留言到本文下方哦。问题1:设计接口测试⽤用例例时,涉及的是电商系统,其中包括很多修改,如商品、商家、店铺等等,针…

html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果

气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果body{background-color:#000000;margin:0px;overflow:hidden}var canvas document.createElement(canvas),context canvas.getContext(2d),windowW window.screen.width ,windowH window.s…

raspberry ssh 允许 root 登录

参考链接 csdn 转载于:https://www.cnblogs.com/eat-too-much/p/11153213.html

python开发转行做数据分析_转行学IT,Java、Python、大数据选择学哪个发展好?

对薪资不满意、担心自己以后不好找工作,不少人都会选择参加培训,转行IT行业。当然很多想要转行IT的人,都会犹豫选择哪门编程语言学习比较好,Python、Java、大数据作为比较热门行业技术,不少人都很疑惑转行学Java、Pyth…

html显示线条流动效果,css3实现线条流动效果

1实现原理:通过animation中的clip实现对div的不断切割首先要弄懂clip的含义,四个参数分别是上右下左,以上和左为标准。clip使用的前提是元素绝对定位。本来想实现这样效果看起来是需要3个div,但是根据前人的经验,使用b…

mysql 解析sql文件

简介 如何使用 本地mysql 解析sql文件 方法 参考链接 cnblogs 看三.创建数据库 参考链接 runoob 看选择数据库 参考链接 cnblogs 看往mysql中导入SQL文件 转载于:https://www.cnblogs.com/eat-too-much/p/11153383.html

html的数据类型有哪些,数据库数据类型有哪些

MySQL中定义数据字段的类型对你数据库的优化是非常重要的。MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)类型。推荐教程:MySQL入门视频教程一、数值类型MySQL支持所有标准SQL数值数据类型。这些类型包括严格数值数据类…

2021 河南 高考成绩查询,2021河南高考成绩查询入口

随着高考结束,高考阅卷工作陆续启动,已有多个省份公布了查分时间,那我们知道河南高考时间是什么时候嘛?下面是小编整理2021河南高考成绩查询入口_2021河南高考查分时间公布,仅供参考,希望能够帮助到大家。2021河南高考…

人脸检测算法_腾讯已开源高精度人脸检测算法DSFD

腾讯提出一种高精度双分支人脸检测器DSFD并开源。该算法曾在全球两大权威人脸检测数据集WIDERFACE和FDDB上均取得了第一。任务介绍人脸检测算法是在图像上检测出人脸的位置(通常以矩形框形式输出),是人脸配准、人脸属性识别、人脸核身、人脸检索等技术的基础。随着人…

java之struts2之数据检验

1.使用struts2时,有时候需要对数据进行相关的验证。如果对数据的要求比较严格,或对安全性要求比较高时,前端 js 验证还不够, 需要在后端再进行一次验证,保证数据的安全性。 2.struts2提供了两种机制来进行后端的数据验…

sdk开发包如何使用_SDK如何使能行业?华为昇腾要用软件充分释放硬件性能

谈及落地,软件永远是激发硬件性能的核心。自AI出现,围绕传统产业“智能化转型”的探讨就一直没有停下。而随着“新基建”口号的喊出,工业制造等场景的智能化进程更是被加上了助推器。以智能制造为例,依据Markets报告所预计的&…

vue入门:(组件)

模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系。初始数据:(data)一个组件的初始数据状态。对于可复用的组件来说,通常是私有的状态。接收外部参数:&#xff08…

鹿邑2021高考成绩查询,鹿邑中考成绩查询2021

2021鹿邑中考成绩查询时间方法:91中考网消息:2021年鹿邑中考即将开始,在中考后,广大考生最关心的无疑就是中考成绩查询方法、鹿邑中考成绩什么时候公布?,根据往年经验,小编收集整理了2021鹿邑中…

excel删除行 uipath_学会这8个Excel神技巧,轻松告别零基础!

无论你是个学生还是职场中人,谁不知道Excel呢?尤其是办公一族,总是不可避免会使用到Excel。下面小电就向大家介绍8个神技巧,让你的工作量大大减少!那什么技巧有如此威力呢?想必有些大家都用过的&#xff0c…

IIS7.5下的asp.net网站不能连接数据库

今天报了一错就是"找不到Table[0]" 感觉是没有连到数据库。 处理方法:把连接字符串由windows身份验证改成 sqlserver验证就好了 我不知道为什么这么做!等待高手给我解答转载于:https://www.cnblogs.com/master-zhu/archive/2010/07/20/17810…

jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法

所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么.1 - 传统的JavaScript我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例:var myRow document.createElement("tr");myRow.class "myClass";var firstTD…

qt 5编程入门(第2版)_《C++并发编程实战第2版》第六章:设计基于锁的并发数据结构(1/3)...

本章主要内容设计并发数据结构的含义设计指南并发数据结构的示例实现在上一章中我们了解了底层原子操作和内存模型。本章我们先把底层的细节放一放(尽管在第7章我们将需要它们),探讨一下数据结构。为编程问题选择数据结构可能是整个解决方案的关键部分,并…

数据I/O流

文件输出流的应用。定义如下字符串:String str “12345abcdef#%&*软件工程”;编写程序将该字符串写入文件”data.txt”。package homework;import java.io.*;public class IO { public static void main(String[] args) throws IOException{ // TODO Auto-gene…

转学到斯坦福大学计算机专业,斯坦福大学转学申请条件有哪些?

斯坦福大学转学申请条件有哪些?据托普仕小编了解,斯坦福大学(Stanford University,简称Stanford)位于美国加州旧金山湾区南部的帕罗奥多市(PaloAlto)境内,临近世界著名高科技园区硅谷,是世界著名私立研究型大学。斯坦福…