快速简便的 JS 视差效果

我最近接到一个工作上客户的任务，要为他创建一个微型网站。这位客户想要一个小型网站来展示他们新推出的薯片和蘸酱系列。这是我在 AMP 的第一个客户交付项目，我非常兴奋，希望能借此机会向我的团队展示，我不仅仅是一个外表光鲜亮丽的人。

于是我和项目经理见面，一起仔细研究了设计方案，并讨论了页面各个部分的功能。设计方案很简单：一个主页面、一个特色产品网格、一个商店定位器、一个产品轮播和一个页脚。唯一的不同之处在于，主页面需要添加视差效果，即当用户向下滚动页面时，一些筹码会弹出并向上移动。虽然这需要一些工作量，但对我来说最大的好处是，网站的其他大部分部分都已经帮我搭建好了，这要感谢我的同事Ethan，他非常擅长为客户快速开发这类微型网站。所以我下载了他的GitHub仓库，并设置了我的本地仓库，我们为这个客户使用了Zurb的Foundation框架。我开始根据设计师的方案，把各个部分组合起来，构建页面。大约3-4个小时后，我完成了我认为是页面基础的部分。所有部分都已到位，所有组件也都按预期运行。现在是时候开始添加视差效果了。

9行JavaScript代码

不废话。我花了几个小时尝试不同的视差库，试图创造出我想要的效果，老板漫不经心地从椅子上挪了过来，说：“看起来很有趣。发给我，我试试看。” 我就照做了。15分钟后，他发给我一个JavaScript文件，告诉我一切就绪。我把他的代码复制到我的JavaScript文件中，编译后用FireFox打开测试。它成功了，效果非常好。我惊讶极了，不停地来回滚动屏幕，让芯片动起来，感觉好像花了好几个小时。请看下面的代码。

很酷，而且超级简单。当然，这个版本需要 jQuery 才能运行，不过用原生 JS 也能达到同样的效果。