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的数据库是一个操作系统只有一个库,说白…

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…

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…

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

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

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

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

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

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

深入理解Asp.net MVC路由

深入理解Asp.net MVC路由 吴剑 2012-10-22 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 前言 从.Net Framework 1.0时代开始写WebForm,直到最近断断续续看到Razor的语法风格,然后搜了Asp.net MVC的一些介绍&#…

高中计算机学业水平测试知识点总结,高中化学学业水平测试知识点总结

高中化学学业水平测试知识点总结大家有总结吗?下面小编整理了高中化学学业水平测试知识点总结,欢迎大家参考借鉴!高中化学学业水平测试知识点总结第一章从实验学化学 第一节化学实验基本方法一.化学实验安全1. 遵守实验室规则。2. 了解安全措…

chrome html 读写文件路径,Chrome浏览器支持直接读写本地文件了

本文首发于公众号:符合预期的CoyPan写在前面最新版的Chrome(Chrome 83, 须要开启权限)支持直接读写本地文件了。javascript开启方法:Chrome浏览器升级到83版本以上;访问chrome://flags/,开启 Native File System API 选项当前如何…

最长单调递增子序列_最长递增子序列(动态规划 + 二分搜索)

题目给定数组arr,返回arr的最长递增子序列举例:arr [2,1,5,3,6,4,8,9,7],返回的最长递增子序列为[1,3,4,8,9]要求:如果arr的长度为N,请实现时间复杂度为O(nlogn)的方法。分析这一题也是经典的动态规划,那么…

二叉排序树(BinarySortTree)

相关知识: 二叉树是每个节点最多有两个子树的树结构。通常子树被称作“左子树”(left subtree)和“右子树”(right subtree)。 二叉树中的左右子树不可随意交换。 根节点:一棵树最上面的节点称为根节点。 父…

惠普台式计算机系列,惠普发布设计笔记本、设计台式电脑等Z系列产品

惠普发布新一代惠普Z系列产品,包含设计笔记本、设计台式电脑、显示器和VR等产品。惠普Z系列设计笔记本HP ZBook 14u G6配有4K显示屏,支持100% Adobe RGB色域显示,拥有600尼特亮度,满足创意族群对色彩的精确要求。HP ZBook 15u G6图…

ORM多表操作之多对多查询

创建多对多的关系 authormodels.ManyToManyFleld(" ")  (推荐) 书籍对象它的所有关联作者 book_obj.authors.all() 掌握:通过filter values(双下划线)进行多对多的关联查询(形式一对多) django是将python语句翻译成sql语句执行 聚…

计算机的iscsi配置,我们将了解如何设置自己的支持iscsi配置的存储节点

iSCSI代表Internet小型计算机系统接口。它用于使用块级数据传输通过TCP / IP访问网络上的存储。NFS与iSCSI之间通常存在比较。关键区别在于NFS是文件级实现,而iSCSI是块级实现。这适用于TCP / IP层,并允许通过局域网(LAN)发送SCSI命令。在诸如iSCSI和光纤…

计算机基础知识复习资料,计算机基础知识复习资料

.Word 资料Ch1 计算机基础知识1.1 现代信息技术1.1.1、特征:●以数字技术和电子技术为基础;●以计算机及其软件为核心;●采用电子技术(包括激光技术)进行信息的收集、传递、加工、存储、显示与控制。1.1.2、数字技术一、二进位数字——比特(b…