简介
simpleparallax 是一个基于 JavaScript 的轻量级滚动视差效果库，可以快速实现图片的视差效果。它不依赖 jQuery 或其他框架，使用简单，运行效率高。
安装
使用 simpleparallax，需要先安装它。你可以通过 npm 安装，也可以从官方 Github 上手动下载。
使用 npm 安装：
npm install simpleparallax --save
手动下载：
https://github.com/geosigno/simpleParallax
使用
HTML 布局
在 HTML 中，我们需要为每个需要添加视差效果的图片加上一个容器，并将容器的 data-simple-parallax 属性设置为图片与容器高度的比例。
<div class="parallax-container" data-simple-parallax="0.5"> <img src="img1.jpg"> </div> <div class="parallax-container" data-simple-parallax="0.3"> <img src="img2.jpg"> </div>
引入 simpleparallax
在需要使用 simpleparallax 的页面中，我们需要引入 simpleparallax 的脚本文件。
<script src="path/to/simpleParallax.min.js"></script>
初始化
在引入 simpleparallax 脚本后，我们需要初始化 simpleparallax。
var simpleParallax = new simpleParallax('.parallax-container');其中 .parallax-container 是需要加入视差效果的容器的选择器。
配置选项
simpleparallax 还提供了一些配置选项，以便你根据需求进行定制。
var simpleParallax = new simpleParallax('.parallax-container', {
delay: 0.6,
transition: 'cubic-bezier(0,0,0,1)',
scale: 1.4,
orientation: 'down'
});delay
- 类型:
number - 默认值:
0.5
延迟动画的时间，单位为秒。
transition
- 类型:
string - 默认值:
'cubic-bezier(0,0,0,1)'
使用 CSS3 transition 动画时所需的缓动函数。
scale
- 类型:
number - 默认值:
1.5
图片初始大小与容器大小的比例。
orientation
- 类型:
string - 默认值:
'up'
视差效果的方向。值有 'up'（向上）和 'down'（向下）。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ----------
-------
- -
------- --
-------- --
----------- -----------
-
---- -
------------ ------ -----------
-
-- -
----------- -------
----------- -----
-
------------------- -
--------- ---------
--------- -------
------- ---- -----
------ ----
------- ------
-
--- -
--------- ---------
------ -----
------- -----
----------- ------
-
----------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ -----
----------- -------
------------ --- --- -----
-
---------------------------------- -
------- ------
-
--------
-------
------
------------------ -------
---- -------------------------- ---------------------------
---- -----------------------------------------
---- ----------------
------- ------
---------------
------
------
---- -------------------------- -------------------------- ---------------------------------
---- -----------------------------------------
---- ----------------
------- ------
---------------
------
------
---- -------------------------- -------------------------- ----------------------------------------
---- -----------------------------------------
---- ----------------
------- ------
---------------
------
------
---- -------------------------- ---------------------------
---- -----------------------------------------
---- ----------------
------- ------
-----------------
------
------
------- ---------------------------------------------
--------
--- -------------- - --- ------------------------------------- -
------ ----
----------- ------------------------
------ ----
------------ ------
---
---------
-------
-------小结
simpleparallax 是一个非常实用的轻量级滚动视差效果库，它可以快速实现图片的视差效果。通过简单易懂的 HTML 布局和少量的 JavaScript 代码，我们就可以轻松地添加视差效果到网站中。同时，其提供了多种选项，可以根据需求进行定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005584781e8991b448d57d8