您的位置:首页 > Web前端

最近阅读的一些资料给大家分享:包括视差滚动,虚拟机安装fedora,sublime text2等等

2012-12-27 14:04 661 查看
一、最近在学习linux,当然得自己装了linux系统,我在win7下通过虚拟机安装了fedora.我也是个菜鸟,自行百度,谷歌,帮你搞定。

虚拟机使用的是:vmware,这个直接百度就能查到。

fedora的下载地址:http://mirror.karneval.cz/pub/linux/fedora/linux/

具体的安装方法,请参考:1.http://wenku.baidu.com/view/7894a95677232f60dccca101.html

2.http://wenku.baidu.com/view/775820f74693daef5ef73df2.html

二、视差学习,最近视差网页实在太火,不研究下你都不好意思,对不对?

1.何为视差?

1.1 解释:http://baike.baidu.com/view/230225.htm?subLemmaId=230225&fromenter=parallax

1.2 定义:视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角,叫做这两个点的视差,两点之间的距离称作基线。只要知道视差角度和基线长度,就可以计算出目标和观测者之间的距离。

2. 构成元素
2.1 动画效果:包括元素运动轨迹,以及视差效果设计
参考网站:http://www.webapptrend.com/2012/03/2150.html
2.2 web字体
四十种web字体组合:http://www.oschina.net/news/24609/40-best-typeface-combinations-in-web-design?from=rss
参考网站:http://newhtml.net/tag/%E5%AD%97%E4%BD%93/
http://www.fontsquirrel.com/fontface
/article/6949145.html

3. 实现方法

3.1 利用css3属性,multiple-background,/article/1214978.html

用纯css3 transition 实现背景图滚动:http://www.paulrhayes.com/experiments/parallax/

CSS3中的Transition属性详解: http://www.cnblogs.com/gaoxue/articles/2287319.html

transform详解:/article/1214992.html

3.2 利用传统的javascript

4. 范例

4.1.http://lostworldsfairs.com/atlantis/ 这个网站是模拟了电梯的下降过程,鼠标滚动过程中,电梯是position:fixed,对背景进行分块处理,然后主要靠背景图片的变换来造成的视差。

4.2.jQuery实现:http://www.ianlunn.co.uk/plugins/jquery-parallax/,原理:http://www.ianlunn.co.uk/blog/code-tutorials/recreate-
nikebetterworld-parallax/
4.3.水平方向的视差滚动:http://www.sequencejs.com/themes/sliding-horizontal-parallax/
4.4这个网站例子很多:/article/1210316.html
4.5. 垂直方向滚动的很多:http://www.iutopi.com/
4.6. 这个网站挺好,简单易学:http://www.css88.com/tool/css3Preview/Transform.html
4.7. QQ浏览器下载页:视差角度是倾斜的,http://browser.qq.com/index_m.html
4.8.nike网站,水平和垂直的视差都有:http://www.nike.com/jumpman23/aj2012/
4.9.新出的10个炫酷的视差网站:http://www.alibuybuy.com/posts/76446.html
5. demo 利用squence插件做了一个demo
5.1.demo地址:利用jquery插件做了个小demo,按左右方向键控制每一屏的翻转:http://hutaoer.github.com/templates/Sequence-master/themes/parallax/
三、sublime text 2
1. 入门技巧:http://lucifr.com/139225/sublime-text-2-tricks-and-tips/?replytocom=122286
2. windows下的快捷键:http://istyles.blog.163.com/blog/static/1811003892011828111418654/
3. mac下快捷键:http://lucifr.com/139235/sublime-text-2-useful-shortcuts/
4.安装常用插件:http://www.imququ.com/post/i_love_sublime-text-2.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐