Author: 曾小乱

如果你想给你的项目创建多个版本怎么办呢，虽然创建多个版本的原因可能是因为你的项目突然产生了一个非常严重的bug、你参加的开源项目不能满足你的意愿、甚至你就想留一些早期的代码作为后期的怀念。

使用git里面的branch概念就可以做到这一点。 最重要的一点是，你在开发一个非常牛逼的项目。

但是一个牛逼的程序员是不能满足现有的牛逼的，所以开一个2.0分支去远征，让稳定的1.0版本继续使用。所以怎么能不去使用分支！

我们经常使用git pull origin master命令，作为新手可能没有去想这个master是什么意思，其实master就是主分支的意思，这就导致了你不能再创建一个叫master的分支除非你删除主分支。同时，这个命令也可以使用git pull 命令来替代，因为会默认获取master分支的代码。 程序员一定要懒，只有懒才能写出更好的代码。

如果你对一个程序员说，你真是太勤奋了，我想这不是最好的赞词。 推荐的命名法则是使用层级式的，比如bug/pr-1023，这样的好处是，git像shell脚本一样支持通配符查找。你可以使用git show-branch ‘bug/*’找到和bug相关的分支。 创建分支 git branch branch_name命令可以创建一个分支，处在最新的commit。

这个命令的完整形式是git branch branch_name [starting-commit]，这意味着你可以从过往的位置开创新的分支。

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

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

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

简介

比较粗俗地讲，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/