简单小巧的JavaScript库，可在任何图像上添加视差动画
Posted
tags:
中文标题：简单小巧的JavaScript库，可在任何图像上添加视差动画 原文标题：Simple and tiny JavaScript library that adds parallax animations on any images 项目评级：Star:1600 Fork:137 下载地址：https://github.com/geosigno/simpleParallax.js 详情介绍simple视差.js
simpleParallax.js是一个非常简单和小巧的Vanilla js库，可以在任何图像上添加视差动画。
在通过其他插件获取结果可能很困难的地方，simpleParallax.js以其简单性和视觉渲染而脱颖而出。视差效果直接应用于图像标签，不需要使用背景图像。有关案例研究的更多信息，请点击此处。
任何图像都适合。试试看！
安装
古老的方式
只需在关闭</body>标签之前复制/粘贴以下片段：
或者使用jsDelivr.com提供的以下CDN链接：
通过npm/纱线
您也可以通过以下方式安装：
然后按如下方式导入：
初始化
给出以下HTML：
只需添加以下JavaScript代码：
瞧！
您也可以选择在多个图像上应用视差：
一旦simpleparallation被正确初始化，它就会在容器上添加simple-parallax-initialized类。
simpleParallax现在可用于视频：
设置
<表格>
设置 类型 默认 提示
您可以使用以下JS代码应用这些设置：
orientation-字符串-参见示例
这是视差效果的方向。选择向上，向下滚动时，图像将从底部平移到顶部（因此图像将向上平移）。向上滚动时，图像将从顶部平移到底部。相同的逻辑适用于所有其他方向（右，下、左和上左向上右向下左向下右右下），图像将沿对角线平移。
比例-数字-参见示例
比例设置得越高，视差效果就越明显。反过来，图像的质量就会下降。为了减少无损效果，如果比例设置为1.5，并且图像宽度为500px，请进行简单的数学运算500*1.5=750。所以你可以选择一个750像素的图像来代替500像素的图像，并且不会看到任何质量泄露。如果您阅读此处的案例研究，可以获得更多信息。
溢出-＜em＞布尔值
默认情况下，图像被缩放以应用视差效果，而布局上没有任何溢出-您可以查看案例研究以更好地理解。当溢出设置为true时，图像将从其自然流中平移出来（因此它可能与您的内容重叠）。
延迟-数字-参见示例
当设置延迟时，当用户停止滚动时，图像的翻译将在该延迟期间继续。这会产生非常好的效果。延迟以秒为单位。请注意，有时这种延迟会导致iOS设备出现问题#47
transition-＜em＞字符串＜/em＞-参见示例
转换设置与延迟的设置紧密配合。此设置将向延迟设置添加任何CSS转换。例如，您可以使用ease或ease-in-out。
customContainer-＜em＞字符串或节点
默认情况下，视差计算是使用身体滚动百分比来完成的。在某些情况下，图像可能位于有自己滚动区域的容器中，因此为了进行准确的计算，应该设置自定义容器。
customWrapper-＜em＞字符串
在某些情况下，您希望使用自己的包装器，而不是插件创建的包装器。如果指定自定义包装器，插件将添加“simpleParallax”类以及“overflow：hidden”样式。
maxTransition-数字-参见示例
maxTransition设置应用于在给定百分比之后停止视差动画。默认情况下，它会将用户视口的0%转换为100%。你可以在这里更改为你想要的任何百分比。
方法
刷新
刷新simpleParallax实例（以重新计算所有位置）：
默认情况下，每次调整窗口大小时都会触发刷新方法。
摧毁
销毁一个简单的Parallax实例：
示例
你可以在这里找到所有的例子。
兼容性
<表格>
狐狸IE 边缘 火灾 铬 Safari浏览器 歌剧 iOS Safari
即使不支持旧的浏览器，页面也不会崩溃。简单地说，不会有视差。
如果您想支持IE等较旧的浏览器，则需要cloest（）和Intersection Observer的polyfill。请注意，即使使用polyfill，视差效果也不会显得流畅。
著者
杰弗里·西格诺拉托
贡献
打开问题或拉取请求以建议更改或添加。