[先行者课程]--0312视差效果--课堂笔记

今天是3月12号，来学习一下视差滚动。

严格来讲，它其实是一种网页效果，而不是一个前端组件，顶多是一个插件。

插件，一般是用来实现网页上的一个或多个功能。

而组件，是为实现网页的业务逻辑，而封装的一组功能代码。它一般是特定的，不特别的强调通用性。

//============

视差滚动（Parallax Scrolling）

parallax[ˈpærəˌlæks]

n. 视差（量），视差角度;

它是一种比较优雅酷炫的页面展示的方式，

今天咱们研究下视差滚动的原理和实现方式。

视差的原理，

视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异。

从目标看两个点之间的夹角，叫做这两个点的视差角，

两点之间的距离称作基线。

只要知道视差角度和基线长度，就可以计算出目标和观测者之间的距离。

--这不就是勾股定理嘛

指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。

从上面几个例子可以看出，视差比较适合从上到下，形成故事性感觉。

不少是利用故事情节或者逻辑方式层层推进式，将视差滚动串联起来。这一点我个人觉得很适合我们的游戏产品，现在游戏中不少是讲求剧情的。

//==========

简单的视差效果，一般可以用css来实现。

background-attachment属性，

设置背景图像是否固定，或者随着页面的其余部分滚动。

常用的用二个属性值，

scroll，默认值。背景图像会随着页面其余部分的滚动而移动。

fixed，当页面的其余部分滚动时，背景图像不会移动。

//==============

js视差效果的插件

接下来讲了下，我是如何阅读源码的

Parallax-Scrolling-master.js

//代码量有限，很可能只是为了实现某个具体网站的代码，，

skrollr-master.js
(function(win,doc,undefined){
 //...这是大闭包方式的写前端组件的套路
})(window,document);
var obj = {
 get:function(){
 },
 init:function(){
 console.log('initxxx')
 },
 VERSION: '0.6.30'
};
obj.init();
//公共的对外方法
//看源码前期主要就是学这些东西。
//根据你用的js的cmd amd不同，有不同的模块输出方法
//三种出口
 if(typeof define === 'function' && define.amd) {
 define([], function () {
 return skrollr;
 });
 } else if (typeof module !== 'undefined' && module.exports) {
 module.exports = skrollr;
 } else {
 window.skrollr = skrollr;
 }

看源码，只看它的js的代码格式，不看它详细的实现内容。

接下来，看例子，看看这个插件的使用方法。

通过看它的使用方法，来大致上搞明白这个插件的运行思路！！！

看源码，要根据一些“线索”，就是变量名，传入的参数，谁调用了它们

//==============

stellar.js

//，它也是类似 的看法

这三个jq插件的js文件都已经打开了，现在咱们来看看，

尝试着读一读它们的源码。

这是我个人的方法，大家一听就算。