imagesLoaded.js

这个是一个检测网页图片加载状况的js库,因为毕业设计的场景图片比较多,所以顺便用到了这个库,了解到这个作者还写了很多有意思的框架。

作者说,JavaScript is all like “You images done yet or what?”这是什么梗?望知道答案的同学分享一下。

为什么要用这个库,估计理由和上面的那个梗有很大关系。我为什么要用这个库,主要是为了让图片加载的过程中有一个有意思的loading,让等待的体验更好一点。

Parallax.js

简介

比较粗俗地讲,parallax.js是根据你的鼠标或者是移动设备的摇晃让元素做出反应的视差库。可以查看demo

简单使用

简单使用的代码的结构大概是这个样子,记得加名为layer的class,data-depth的推荐值为0至1,不过你要填入100或者-100,也没有什么关系,只是会动得特别快,像幽灵一样。

然后加上这样的js代码:

移动的速度是怎样确定的

有个公式:

parentElement.width就是父元素的宽度,也就是id为scene的宽度,layerDepth就是设置的data-depth的值,scalarX和scalarY就是可以设置的参数,给你移动的距离有了可以设置的灵活性,数值越大,移动范围越大,默认值都是10.

其它配置

limit-x:限制x轴的移动距离。

friction-x:如果想模仿卡顿的效果,把这个值设置大一点。

origin-x:这个值一般设置为0.5就好,以鼠标为中心进行移动。

scalar-x:如果想要在x轴移动的快一点,将这个数值变大。

https://github.com/wagerfield/parallax

http://bs.zengxiaoluan.com/