简介
stellar.js 是一个基于 jQuery 的 JavaScript 库，可以帮助开发者创建各种视差滚动效果。视差滚动是指在页面滚动时不同的元素以不同的速度移动，从而产生立体感和深度感。使用 stellar.js 可以让网页更加生动有趣，增强用户体验。
安装
首先需要安装 Node.js 和 npm，然后在命令行中执行以下命令安装 stellar.js：
npm install stellar.js
使用
在 HTML 文件中引入 jQuery 和 stellar.js：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/stellar.js/jquery.stellar.js"></script>
在需要应用视差滚动的元素上添加 data-stellar-ratio 属性：
<div data-stellar-ratio="0.5"> ... </div>
这里的 ratio 值表示相对速度比例，值越大则移动速度越慢，值为 1 表示和页面滚动速度一样。还可以通过 data-stellar-vertical-offset 属性设置垂直偏移量，如：
<div data-stellar-ratio="0.5" data-stellar-vertical-offset="100"> ... </div>
其他属性还包括 data-stellar-horizontal-offset 和 data-stellar-background-ratio 等，详见官方文档。
最后在 JavaScript 中初始化 stellar.js：
$(window).stellar();
示例
以下是一个简单的示例，页面上有两个盒子，分别设置了不同的 ratio 值和垂直偏移量：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
-------
---- -
------- --
-
---- -
------ ------
------- ------
----------------- -----
------- --- ----- -----
----------- ------
-
----- -
----------------- -----------------------------------------
---------------- ------
-------------------- -------
-
----- -
----------------- -----------------------------------------
---------------- ------
-------------------- -------
-
--------
-------
------
---- ---------- ----- ------------------------ -----------------------------------------
---- ---------- ----- ------------------------ -----------------------------------------
------- -----------------------------------------------------------
------- ---------------------------------------------------------
--------
--------------------
---------
-------
-------打开页面后，向下滚动可以看到两个盒子以不同的速度移动，产生了视差效果。
总结
使用 stellar.js 可以很方便地为网页添加视差滚动效果，提升用户体验。需要注意的是，过多的视差效果可能会让页面显得过于花哨而影响用户阅读。在使用时应根据实际需要和设计要求适当调整参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33031
