Parallaxing NPM

Prallaxing

A light weight library to handle scrolling parallax effect. 一个轻量级页面滚动视差效果的库

This is how it looks like, you can set the parallax scrolling effect for any element with different offsets.

就如看起来这样，你可以设置滚动时候任何物体的相对位移差。

via <script> tag

<script src="parallaxing.min.js"></script>

or you can via npm or yarn

#npm
npm install parallaxing

#yarn
yarn add parallaxing

And you can import it as follow:

import parallaxing from 'parallaxing';

Example HTML:

HTML例子:

<div >
  <img src='...' />
</div>

parallax: Add parallax attribute to parent node to enable parallax effect,

parallax-offset: add parallax-offset=500 attribute to child node to set 500 px distance of parallax ：

给外层节点加属性 parallax 来启用视差效果，给子节点加属性 parallax-offset=500 来设置视差距离:

<div parallax>
  <img src='...' parallax-offset='500' />
</div>

then

最后调用parallaxing()

<script>
  parallaxing()
</script>

That's it! As you scrolling, your child will parallaxing to the container.

就这样! 随着你滚动，你的子元素会相对父容器产生位移差（视差效果）.

parallax-offset
How long you wish for the parallax offset 你想要偏移的距离
parallax-out
0-100, the percentage of screen height where you finished parallax
结束偏移的屏幕高度的百分比，屏幕最顶端为0，最底端为100
parallax-in
0-100, the percentage of screen height where you started parallax
开始偏移的屏幕高度的百分比，屏幕最顶端为0，最底端为100