Parallax.js

简介

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

简单使用

<ul id="scene"> 
<li class="layer" data-depth="0.00"><img src="layer1.png"></li>
<li class="layer" data-depth="0.20"><img src="layer2.png"></li>
<li class="layer" data-depth="0.40"><img src="layer3.png"></li>
<li class="layer" data-depth="0.60"><img src="layer4.png"></li>
<li class="layer" data-depth="0.80"><img src="layer5.png"></li>
<li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>

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

然后加上这样的js代码:

var scene = document.getElementById('scene'); 
var parallax = new Parallax(scene);

移动的速度是怎样确定的

有个公式:

xMotion = parentElement.width * (scalarX / 100) * layerDepth 
yMotion = parentElement.height * (scalarY / 100) * layerDepth

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

其它配置

<ul id="scene"
  data-calibrate-x="false"
  data-calibrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8"
  data-origin-x="0.0"
  data-origin-y="1.0">
  <li class="layer" data-depth="0.00"><img src="graphics/layer1.png"></li>
  <li class="layer" data-depth="0.20"><img src="graphics/layer2.png"></li>
  <li class="layer" data-depth="0.40"><img src="graphics/layer3.png"></li>
  <li class="layer" data-depth="0.60"><img src="graphics/layer4.png"></li>
  <li class="layer" data-depth="0.80"><img src="graphics/layer5.png"></li>
  <li class="layer" data-depth="1.00"><img src="graphics/layer6.png"></li>
</ul>

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

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

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

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

https://github.com/wagerfield/parallax

http://bs.zengxiaoluan.com/

15年下半年的工作总结

我从去年七月份开始实习,半年时光,感觉一事无成。

开始两个月,在北京地林伟业(长沙)实习前端,在这个期间最大的收获是比较系统的学习了前端的一些知识。被曾老师严格的美学要求影响,这让我现在看到一些网页总有股要调调间距的冲动。但是也不得不承认,我在地林所学甚少,对web前端的认识有限。这种悔恨来自于对事物真实情景了解不多,web前端已经发生了很多变化。

9月份开始,我就去长沙快智网络科技上班了,这更是一场“黑暗”的岁月。

快智是一家创业公司,九月份的时候,这家公司还不具规模,在任何方面都是偏稚嫩的,没有经验导致公司的决策执行力不足,一个创业公司的包袱反而越来越重。这些沉重的反思包括以下几个方面:

1.不知道产品的样子。没有明确产品的核心竞争力,创业公司这么多,为什么我能成功,而别人失败了。

2.太随意的决策。一些决策做好了,反而又没有执行到底,事情没有完成,就会带来额外的成本。

3.不知道要干嘛。每天看似都有事情做,但是所做的工作毫无价值,重复劳作。

4.没有理念。不知道理念是什么,没有理念,就没有办法传播。

怎么建设一个好的团队?

1.寻找经验丰富、执行力强的人。

2.明确团队的目标和使命。

实习这么久,我只是这样去认为的。16年的春节假期,我只能感慨什么都没有做好。

狗逼

以上图片表情包配字:芭比要下来吃屎了。

低价租售阿里云备案幕布

这几天一直在弄分库,所以之前写的代码要修改一下。以前一直觉得分库是个很牛逼的东西,至少有一定的数据量才应该去分库,跟人吹牛皮的时候,可以说我是“二八”定律里的“二”,意思就是说只有百分之二十的程序员做过分表分库,而我在还没有毕业的时候,就走到了这个“二”的行列里了。

等一下,这话说的有点不对味。

我问在中南读书的某同学,“你作为一个资深系统架构师,你搞过分表分库,那你们是怎么搞这个东西的?”。

他曾经自诩系统架构师,统管多端,曾经成功欺骗一个天真老板,搞垮了几个创业公司。而他的答案也无二致,无非就是根据用户id取模,再逐一进库出库。

另外,想到四月将至,我也应该回学校去做什么鸟什子毕业设计,我一个学工业设计的,按照规划好的套路,应该是建个什么模型,渲染搞一下,然后敷衍几句这个设计如何符合人机工程学,毕业了事。但是很可惜的是,这些我不愿意搞,没什么意思,虽然主要原因不是我不想搞,而是我不会搞。所以,我还是搞代码,美其名曰,交互设计。也算不偏离工业设计太远。

所以我买的域名要备案了,现在我在阿里云购买了一块高价拍照幕布,十五元人民币,现在低价租售给身边要备案的朋友,你们不要的话,我就拿着洗脸了。