网站培训,菜篮网网站开发技术,天津 公司做网站,微信做一元云购网站今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件#xff1a;Parallax.js。
Parallax.js简介
Parallax.js是一个简单的#xff0c;轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用#xff0c;也可以以纯JS的方式来使用。 最-最-最厉害的是它…今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件Parallax.js。
Parallax.js简介
Parallax.js是一个简单的轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用也可以以纯JS的方式来使用。 最-最-最厉害的是它可以对智能设备的方向作出反应即使在没有陀螺仪或运动检测硬件可用的时候也可使用光标的位置来代替。
我要开始啦
准备工作
首先肯定是先引入JS库。有三种方法
1使用CDN
script srchttps://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js/script2在GitHub上下载Parallax.js如下图所示。 下载最新版本的ZIP包解压获得parallax.js和parallax.min.js。用其中一个就好。
3npm依赖安装
npm i -s parallax-js源码路径node_modules/parallax-js/src/parallax.js产品版路径node_modules/parallax-js/dist/parallax.min.js
再根据你喜欢的工作流程要求导入库
import Parallax from parallax-js or
const Parallax require(parallax-js)使用方法
每个Parallax.js实例都需要一个Dom元素我们称为场景。让我们任意定义一个。
div idscene
/div场景中的每个子元素都可以成为移动目标。我们先来最简单的。
div idscenedivMy first Layer!/divdivMy second Layer!/div
/div在视差场景中移动的每个项目的类别layer和data-depth指定其在场景中的深度的属性。
深度0将导致层保持静止。
深度1将使层通过所计算出的运动的总效果移动。
0和1之间的值将导致图层相对于提供的比例移动一个量。
style#scene {width: 800px;height: 600px;margin: 200px auto;}
/style
div idscenediv classlayer data-depth0.2My first Layer!/divdiv classlayer data-depth0.6My second Layer!/div
/div一旦DOM元素加载好就可以创建出Parallax.js实例啦。
var scene document.getElementById(scene);
var parallaxInstance new Parallax(scene);好了你已经学会Parallax.js的入门操作了。看下效果 就这么简单、粗暴
进阶使用
Parallax.js如果仅仅是这样且不弱爆啦 在学习Parallax.js定义的多种配置和方法前让我们来看看目标是怎么移动的
层运动的计算规则
“目标”其实就是我们场景中的子元素需要用classlayer来指明又称为层。每一个层的运动量依赖于3个因素
scalarX和scalarY的值父DOM元素的尺寸大小一个parallax场景中层的depth值
计算的公式如下
/*** xMotion: x方向的总运动量* yMotion: y方向的总运动量* parentElement.width: 父容器的宽度* parentElement.height: 父容器的高度* scalarX默认值10.* scalarY: 默认值10.* layerDepth: data-depth属性值* /
xMotion parentElement.width * (scalarX / 100) * layerDepth
yMotion parentElement.height * (scalarY / 100) * layerDepth 这就是画面中层级移动的原因。
行为属性配置参数
你可以为任何给定的Parallax实例设置如下这些行为的配置参数。可以在HTML标签中使用data属性来指定也可以通过构造函数和API在JavaScript中指定。
其他API方法
上面说过一些属性参数配置项可以通过方法来指定如scalar-x和scalar-y就可以通过scalar(x, y)来调用。 除此之外Parallax.js还有如下常用方法
parallax.enable(); //让禁止运行的实例恢复运行
parallax.disable(); //禁止实例运行
parallax.destroy(); //销毁实例作为jQuery插件使用
如果你将Parallax.js作为jQuery或Zepto插件来使用可以如下方式使用
$(#scene).parallax(); //或带参数的用法
$(#scene).parallax({calibrateX: false,calibrateY: true,invertX: false,invertY: true,limitX: false,limitY: 10,scalarX: 2,scalarY: 8,frictionX: 0.2,frictionY: 0.8,originX: 0.0,originY: 1.0
}); 注意使用jQuery或Zepto前要引入相应的库。
看看这个Demo效果
还没使用过Parallax.js的小伙伴们赶紧秀起来吧
最后
【程序视点】助力打工人减负从来不是说说而已
后续小二哥会继续详细分享更多实用的工具和功能。持续关注这样就不会错过之后的精彩内容啦
如果这篇文章对你有帮助的话别忘了【点赞】【分享】支持下哦~
