[先行者课程]--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文件都已经打开了,现在咱们来看看,
尝试着读一读它们的源码。
这是我个人的方法,大家一听就算。
- Linux下FTP虚拟账号环境部署总结
- Replace方法与正则表达式的性能比较
- 由索引节点(inode)爆满引发的问题
- As3.0中的位图(Bitmap/BitmapData)编程
- Mesos+Zookeeper+Marathon的Docker管理平台部署记录(2)--负载均衡marathon-lb
- Docker集群管理工具-Kubernetes部署记录
- AS3:小游戏“贪吃蛇”的实现
- 超实用的8个Linux命令行性能监测工具
- 用javascript替换URL中的参数值
- Gitblit版本服务器环境部署记录
- HDK扩展自定义VEX函数print
- AsyncTask和Handler对比
- sql初始化XML操作
- 给你一根杠杆,撬起万亿的小程序红利市场!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- BigData--Apache Flume框架
- 【项目实战】DWS 层创建&数据接入
- BigData--Hive数据仓库工具
- 读书笔记——《深入浅出 Webpack》( 送 XMind导图和电子书)
- BigData--MapReduce进阶(二)之工作机制
- BigData--MapReduce进阶(一)之框架原理
- BigData--MapReduce入门
- BigData--分布式流数据流引擎Apache Flink
- 【项目实战】ADS 层数据导出
- 前端大杂货铺系列《七》
- BigData--大数据技术之Spark机器学习库MLLib
- 【LeetCode】三数之和
- BigData--大数据技术之SparkStreaming
- Jenkins 入门实战:GitHub Push触发Jenkins自动构建
- 2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置