【资源】前端开发工具和资源、滚动视差和CSS3动画特效站点

为什么80%的码农都做不了架构师？>>>   

部分资料来源地址：

• http://freestyleboy21.blog.163.com/blog/static/208406241201210984450858/

• http://freestyleboy21.blog.163.com/blog/static/20840624120121012112416978/?latestBlog

一、前端开发工具

• sublime text2：http://www.sublimetext.com/

• httpwatch：http://www.httpwatch.com/download/

• chrome：http://www.google.de/intl/zh-CN/chrome/browser/

• 正则表达式测试器：http://deerchao.net/tools/regex_tester/index.htm

• CSS Lint：http://csslint.net/#results 

• Fiddle：http://fiddle.jshell.net/

• YSlow：https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh 

• MarkDown：https://chrome.google.com/webstore/detail/markdown-preview/hpdcheheebhjfkbdbialimlbhoopehil

• Fiddler：http://www.cncrk.com/downinfo/31060.html

二、前端相关PPT

    Ghost@tencent

• 浏览器工作原理浅析   http://www.slideshare.net/fullscreen/GhostZhang/ss-11476817/1

• 闲话浏览器兼容 http://www.slideshare.net/GhostZhang/ss-7892037

    ytzong@tencent

• cssgaga http://www.slideshare.net/ytzong/cssgaga

    kejun@douban

• 前端基础架构的实践和思考 http://www.slideshare.net/kejun/ss-9413262

• 前端开发理论热点面对面：从怎么看到怎么做 http://www.slideshare.net/kejun/ss-9015786

• 永不止步的重构 http://www.slideshare.net/kejun/ss-10118650

• 响应性设计和开发 http://www.slideshare.net/kejun/responsive-ui-kejun

• 更好的文件组织 http://www.slideshare.net/kejun/ss-12148658

    玉伯@alipay

• Kissy模块化实践 http://www.slideshare.net/yiminghe/kissy-6637677

    拔赤@taobao

• 编码大全 http://www.slideshare.net/lijing00333/ss-9016595

• 小控件，大学问（淘宝旅行日历控件改版） http://www.slideshare.net/lijing00333/ss-8913661

• Mobile UI design and Developer  http://www.slideshare.net/lijing00333/mobile-ui-design-and-developer

• JavaScriptAutoload  http://www.slideshare.net/lijing00333/javascript-autoload-8590158

• html5 http://www.slideshare.net/lijing00333/html5taobao

• 2011淘宝首页开发实践 http://www.slideshare.net/lijing00333/2011-6516501

• 前端电子书项目总结 http://www.slideshare.net/lijing00333/ss-2621788

    明城@taobao

• 前端安全概览及防范 http://www.slideshare.net/lijing00333/f2e-security

    圆心@taobao

• 前端Javascript 相关tips http://www.slideshare.net/louxiaojian/jstips-100401005855-phpapp01

三、参考站点

    综合站点：

• http://www.dzinemart.com/

• http://bm.straightline.jp/

• http://reeoo.com/［可以按照网站颜色搜索］
  

    滚动视差（parallax scrolling website）

     [纵向滚动]

• 滚动视差教程1［Demo］

• http://www.meetinnov.com/en/

• http://www.piropixel.com/

• http://www.teapot-creation.com/#/page/home［黑白风，在chrome下有闪烁的感觉，不过我很喜欢那个大圆盘］
  

    全屏幻灯

     [横向幻灯]

• http://smokeybones.com/

• http://hotdot.pro/en/

    CSS3动画效果：

• http://oridomi.com/#demos

• https://github.com/mbostock/d3/wiki/Gallery

• http://www.csswinner.com/［商城站点，效果很流畅］
  

• http://bl.ocks.org/MoritzStefaner/1377729 （网站节点动效，svg技术，效果类似“粘粘的世界”）
  

• http://codepen.io/
  

• 3D翻转效果

    Simple, lightweight parallax engine that reacts to the orientation of a smart device 

• 根据颜色搜索网站：http://reeoo.com/

• http://visitbruges.be/

• http://www.spokespedicabs.com/  

• http://bristolgreencapital.org/  

• http://www.valencia-dmc.com/  

• http://www.futurebristol.co.uk/ 

• http://beta.theexpressiveweb.com

• http://www.360langstrasse.sf.tv/page/

• 马里奥赛车滚动视差网站 http://www.nintendo.com.au/gamesites/mariokartwii/#gamecube 

• http://www.superbotentertainment.com/ 

• http://www.taobao.com/go/act/rhgt.php?spm=1.1000386.1000263.5.D2bvzm&ad_id=&am_id=130106499726cfc427b4&cm_id=&pm_id=  

• http://wanke.etao.com/activity/app/?spm=1002.1.5.1.pp1Cpe&tbpm=20130910#  

• http://intacto10years.com/index_start.php   

• http://www.lucasnikitczuk.com.ar/ 

• http://spuzzle.pl/ 

• http://www.eco.se/zh/collection-244/ 

• http://wagerfield.github.io/parallax/

• http://www.eboyfixpix.com/

•  http://www.cymetriq.hu/ 

• http://www.citycreator.com/build.city?city=1 

• http://www.redbullstudios.com/auckland/studio

• http://www.zensorium.com/tinke/

• https://www.spotify.com/int/

• http://www.ok-studios.de/home/

• http://panasonic.jp/shaver/lamdash/dna/index.html 

• http://capitolcouture.pn/ 

• http://sanissimo.com.mx/ 

• http://reeoo.com/ 

• http://www.valencia-dmc.com/ 

• http://www.rendezvous.nl/ 

• http://axel-aubert.fr/ 

• http://visit.uc.pt/en/ 

• http://www.mp2013.fr/

• https://www.ideematic.com/

• http://sr.eurochem.ru/sr/2011/

• http://www.we-love-geeks.com/

• http://www.naturestable.com/menu/

• http://www.evoenergy.co.uk/uk-energy-guide/

• http://www.restaurant-anousdeux.fr/

    收集网站

• http://www.besthtml5gallery.com/

• http://www.csswinner.com/

• http://www.thebestdesigns.com/

• http://www.olechefperu.com/

• http://2012.2fly.com.br/

• http://www.ccbcc.com/

• http://odoroki.drq.co.jp/

• http://www.spaceshowertv.com/sync/#!/

• http://fifteenrobin.com.sg/

• http://www.spokespedicabs.com/ 

• http://learnlakenona.com/

• http://kojimorimoto.com/html5.php

• http://www.weareapartments.org/

• http://www.antingnewtown.com/

• http://horo-hirosaki.net

• http://shop.nikon-image.com/nikon1/nikon1aw1/

• http://www.case-3d.com/#home

• http://www.madwellnyc.com/

• http://www.frames.jp/

• http://www.cyberbuzz.co.jp/

    导航菜单清晰、具有滑动效果：

• http://www.baby-waserin.net/

    内页：

• http://www.designfestagallery.com/about

• http://www.kircher-burkhardt.com/#!/people

• http://setagaya-ldc.net/seminor/

• http://www.matteocianfarani.com/

• http://www.taobao.com/go/act/sale/zhishishu.php

• http://moto.oakley.com/

• http://bm.straightline.jp/

    不规则地图：

• https://www.stanleyplaza.com/en/the_piazza/floorplan.asp#3f

• http://www.outsharked.com/imagemapster/default.aspx?demos.html#resize

• http://www.mq.edu.au/sustainability/greencampusguide/

四、设计酷炫站点

• http://www.piropixel.com/［内容元素全部绝对定位，可以作为活动站点的参考］

五、图片及其他素材站点

• http://wallbase.cc/

• http://www.shutterstock.com/
  

转载于:https://my.oschina.net/maomi/blog/164099