预览模式: 普通 | 列表

 今天是2015年的第4天,多数公司上班了。跟夏总偶尔聊了项目及文字沟通的事儿,忽然想起,自己也应该写写年终总结了。

 
先列大纲:
 
1、操作了几个真正有协作、有成就感的项目。
2、认识了几个能坦诚交流的新朋友。
3、在前端技术上,基本放弃了AS3编程,坚持HTML+CSS3+JQUERY的方向,把前几年的积累做进了真实的项目,产生了收益。2013-2014年,上房房地产系列的项目,带来前端编程技术方向的磨练。
4、在手机微场景的技术追寻过程中,感悟一个新产品品类的学习过程。
5、互联网健身联盟,篮球队的兄弟们让我懂得协作与沟通,人脉进一步拓展。
 
 
--------------------------------------------------------------------------
 
七月份的“有心思”电商项目,周总的执行力给我印象很深。他只用了几天时间,找到我--劝说我加入项目--邀请王老师加入--打预付款给我们--准备机票--全组人到达大理--开工。整个过程就象他的性格一样透明、爽朗。有心思项目较严谨,有全套的项目文档、原型设计--这也是当初打动我的原因。项目各阶段总能看到牛人的平面、影视宣传作品,老板们在项目投入上很是舍得。人员方面,大家也紧密配合,任劳任怨,有压力但是无戾气--这让我见识到一个电商项目的真实推进。
 
很惭愧,周总高估了我在设计上的实力,我没有能帮到项目组,只是在bootstrap等前端开发层面,做了一些小小的工作(部分技术清单:258754.cn/ui3)。与“有心思”项目组一起在大理度过愉快一个月(老婆最后几天也过去了)。早起跑步、洗完澡开始工作、比较健康的小食堂餐饮,没有太多生活琐事的打扰。空气好,心情也好。还认识了新来、小胖、刘先生、小术、中亮、俊哥这些新生代的开发年轻人,在项目完成后,大家也成了好朋友,经常交流。
 
小胖是一个前后端均通的小牛人,之后参加了我介绍的诸多健身活动。他也给我介绍了另外的资源。从他身上,我体会到了乐观和进取。
 
大理之行跟王老师较多交流(好基友住一个房,都是话唠)。每天早上,我6点出门跑步,回来洗完澡,老王就起来跑步了,虽然有点晚,但是略胜于其它根本不起床的人。有一天,他早起了,我又跟着他跑了5公里,那是我生平第一个10公里...我们可能是同类人,有普通的生活,有幸福的家庭,有弱弱的艺术和事业追求(主要是我比较弱),意气相投。
 
八月,一个机缘认识了夏总--他给我的运动生活带来了转变--把我带进了互联网健身联盟篮球队。夏总又给我介绍了云咖啡项目。年底,他的“芒果游”项目碰到了小小难题,我们终于有了携手的机会。他是一个勇敢和坦白的人,我很少看到一个带头人,在不太熟的朋友面前,直陈己失--相信他的努力必有回报。
 
健身联盟篮球队的经历,虽然跟工作并没有太多关系,但是其中得失,有益身心。这个组织,至少给我增加了二十个密切互动的圈内人脉,还有更多时有关注的外围人群。组队比赛的过程,也更新了我自己一些陈旧的观念,与年轻人更能相处相容。特别感谢老丁、明祥的付出,其它同队兄弟不一一罗列,新的一年,有新的配合、合作的机会。
 
我从2013年开始,在上房科技的房地产系列网站,担任一段时间的前端制作。写了不少奇奇怪怪的模块,并且居然都搞成了,并上线运行了。这系列项目,推动我的前端技术,真正从学习到应用。谢谢刘刚、刘焱、小肖、张威、黄杉、国栋等各位兄弟。上房是真正做事情的节奏,永远向前破冰而行。看过“华中心”项目那一列出来近200条的修改清单,以后还有什么小修小改不能承受?
 
九月份的时候,司马丢给我一个手机微场景滑动模板的演示,问我能不能做,什么价位。从此开始,就不断有人问起这个东西的制作。当然现在我们知道了,这就是一个swiper.js的主框架+一些时间线动画。可是当时,想做出这样一个东西,还是太急促了。有几天时间,我边分析边陷入两难,是购买,还是破解,还是自行开发?各方面得到的信息都不太对称。接着几个月,象恋爱一样,追寻这个框架的进展,技术思路渐渐清楚:
1、先是有朋友的公司可以提供收费的简单框架,一千多。
2、有大牛团队可以提供定制(贵,很贵!)。
3、接着有天,刘浩告诉我,在某网上出现了免费下载的框架,我去问了问价,200块,一时没舍得,自己花了点时间,分析了被混淆的代码,发现了核心的swiper的调用方式及微信分享的代码,到其官网(www.idangero.us/sliders/swiper/)看了看,发现了这个牛B的插件。
4、广电的小黄拿他的新作给我炫耀,这才看到了完全没混淆的版本,果然就是swiper。接下来几天,他又给了我更多的信息,带声音的版本,带3D flow的版本(最欣赏小黄这种知无不言的性格)。
5、我自己写了一个测试,至此,这个技术完全掌握。虽然一分钱没赚到,但感觉很开心,如同炸完珍珠港的那个返航--总有一天搞定你。
 
对技术的追求体验,大体如是。
 
还有一个能力也得到了提升,那就是,接单的判断能力。不再象早两年,什么单都想接,花了不少的时间在一些不相干的事情上。现在,很明确,询单电话过来,不出5句话,基本就能判断,这是不是我的菜,有没有档期,如果做不了,要转给哪个朋友。非我特长,就不拖泥带水。
 
移动互联网来势汹汹,用了十年的老知识,已经明显不够用了,前端已经变成最热门的开发点。新的一年,我的小工作室诚意滔滔,为所有需要我们的客户提供服务。
我儿已经五岁,月前,教他背的那首诗,多年之后,仍会在他心中响起:
 
百川到东海,何时复西归,少壮不努力,老大徒伤悲。


正片已完,以下是彩蛋1:
 
1、常用工具:emmet/印象笔记/麦客
2、框架/库:GSAP/idangerous.swiper.js/bootstrap
3、关注的媒体资源:知乎/开源中国/huaban.com/公众号:小道消息、程序人生
 

彩蛋2:
 
长跑,最好成绩12公里-----半程马拉松仍是我的理想、我的梦想,开春继续练习。
读书,2014年认识了汪曾祺与张嘉佳--前者让人心静如水,后者让人热血沸腾。
享受与妻子的“周末假期”,看了几场电影。
儿子健康的成长,养成了不少好习惯---玩轮滑丢了两颗门牙。

彩蛋3:
 
我一度自信满满,只到那天,我看到这则招聘:

大家好,我是长沙**互动HR 现公司急聘前端开发3人
任职要求
1. 编写CSS/CSS3/HTML5如探囊取物,浏览器兼容性懂到IE8就够了(不用谢!)
2. 扎实的Javascript基础知识
3. 模块化开发当然是必须滴,AMD/CMD任君选用
4. 深入精通至少一款前端框架,如:AngularJS, Backbone等(只会用jQuery操作DOM的,再见不送!)
待遇要求:4K-8K (跟我们老板的节操一样无上限,只要您有能力一切都可谈)
联系方式...........

我居然就是那个只会jquery的人,被“再见不送”的人,鄙视链的末端生物!
马上给自己打鸡血,买了本AngularJS的书看起来,可是,看不懂.....一度对自己的能力产生了怀疑。有次去河西某单位面谈,试试自己的身价。一个来谦逊地面试我的小满哥技术经理,看着我图形化的简历,仰视道,你会的这些我好多都不会....最后他们技术总监出来谈了谈。因为离家太远了,我也兴趣不大, 连价格都没谈--其实我还是可以上班的,如果出价公道,以及有足够学习的空间。
 
我是一只努力跳跳跳的井底之蛙。哪怕有一天,我也精通AngularJS,不知是否能生成出价值8K的自信。我的强项在GSAP,这是一个多冷门的库,未来某天,我可能在面对一堆菜鸟的时候,自豪的说,我是中国翻译GSAP技术文章最多的人,可是台下肯定没有一个人知道我说的是什么....悲凉,技术人就象一方净水中生存的桃花水母,自得其乐。
 
段子来了:
一个技术大牛和一个PLMM,同时去应聘一个岗位,在“特长:”一栏,大牛写的“AngularJS”,PLMM写的是“腿”,你猜谁被录取?
 
 
 
标准答案是,当你做了那个老板,爱谁谁。

 

 

查看更多...

分类:开发心得 | 固定链接 | 评论: 3 | 引用: 0 | 查看次数: 3019

 swiper.js是手机微场景制作中最常用的框架,功能强大,参数齐全。它在使用loop: true这样的参数时,滑动片将可以首尾连接,即可以循环地滑动场景。

 
但在DOM结构上,会用clone方式,在首尾各增加一个slide单元。跟任何的对象克隆一样,这会带来一些不可预知的问题,比如:
 
1、会将id=**的对象也克隆,使id不再是唯一的,造成控制问题。
2、swiper.activeIndex,即当前激活的滑片号,序列方式会有差别。与初始DOM的对应关系,可能使用swiper.activeLoopIndex更准确一些。此时一定要弄清activeIndex与activeLoopIndex这两个参数的区别,这样方可准确定位DOM对象。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6067

 昨天群友发出一个网站中有一个导航条出场效果,挺有味道。于是花了2小时模仿成功,我作品在此:

http://258754.com/m/zgl/TweenMax_3D_transform.HTML

 

原站在此:http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D

GSAP范例在此:http://greensock.com/css3/

----------------------------------------------------------------

不查不知道,原来GSAP有如此强大的CSS动画功能,尤其是对于仿3D变换的支持。只是GS官网上的文章虽多,但源码较少,辗转stackoverflow.com找到一些相应的源码。

我个人比较喜欢GSAP来替代CSS动画,GS官网上说是GSAP的时间轴TWEEN类动画,无论是从代码效率还是代码简练度上,都远超CSS动画。至少后者是属实的。这6句代码,如果有用CSS写,会写上一大版。

Javascript代码
  1. <script src="js/jquery.min.js"></script>  
  2. <script src="js/TweenMax.min.js"></script>  
  3.   
  4. <script>  
  5. TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});  
  6. TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  7. TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  8.   
  9. TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});  
  10. TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});  
  11. TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});  
  12. </script>  

 

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1785
客户R 2014/8/26 13:01:50
在?
嘟嘟  14:54:46
 
客户R  14:55:13
你是做flash动画的?
嘟嘟  14:55:23
能做。
客户R  14:56:51
我们有一项目   有个页面需要做几个flash动画     我们这边自己没这方面的人做   希望找个能做这个的
师哥很简单的动画
是个
嘟嘟  14:58:05
我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。
客户R  14:58:43
恩 好   我先给你们介绍下我们做的背景
我们在做一个空气质量预报系统   在对外发布页面希望以动画的方式发布空气质量
场景1:空气质量为优
客户R  14:59:54
小狗两脚走路从狗屋出来;深呼吸,做一个惊讶的笑脸;兴奋的开始做热身运动;四脚着地,欢快的从左到右跑,离开屏幕;
这是其中一个场景   总共四个
7个
嘟嘟  15:00:32
哦,你这是要做创意。这个恐怕费用不低。
客户R  15:01:00
这不算创意吧
这个思路我们已经写出来了   你只要动画实现就ok
嘟嘟  15:01:48
小狗的形象原型什么的,你们设计了没?你们现在只有文字稿,是吧?
客户R  15:02:40
小狗形象有
嘟嘟  15:03:11
深呼吸,做一个惊讶的笑脸----这些都要做创作了。
客户R  15:03:18
 
嘟嘟  15:03:28
相当于做一个微型的动画片了。
客户R  15:03:33
就这个个大头狗   
嘟嘟  15:04:03
这些我做不了。我强项还是在编程逻辑上。
客户R  15:04:17
呵呵   我们这边同行有做过这种动画
哦   好吧
嘟嘟  15:04:30
建议你们联系一下动画(卡通)制作公司或是形象设计公司。
客户R  15:05:02
额?呵呵   我是在广州   但是是长沙人   所以就来长沙找你们了
呵呵
嘟嘟  15:05:10
你这场景是用于网站,还是手机项目?
客户R  15:05:25
系统网站
嘟嘟  15:06:06
哦。动画要做得如此精美?很少见。成本恐怕不低。
客户R  15:07:12
这是很简单的吧
类似这样的
客户R  15:08:19
推荐安装全能绿色的QQ影音播放本文件。
 
嘟嘟  15:08:47
至少我在国内网站上和APP上,很少看到类似做法。
客户R  15:09:17
呵呵
嘟嘟  15:09:25
更多的还是较简练的图象表达。比如我用的墨迹天气这种。
客户R  15:10:05
哎   没办法啊   人家领导要求这样
嘟嘟  15:10:59
今天还看到知乎上一个评论。说 知乎当时在首页上放了一个类似你这样的动画(视频),结果浪费的流量大得惊人。
哈哈,每一个苦B的项目后面,都有一个天神般的领导。
客户R  15:11:30
这不是手机上的   也无所谓吧
哎  政府的大大们   无法评论啊
嘟嘟  15:12:19
你系统访问量不大当然没问题。如果是FLASH,还要考虑跨平台的问题。比如IPAD.
我群里有专门做卡通的牛人。如果你预算在2万以上。我可以介绍一下。
客户R  15:13:05
人家怎样要求   咱就怎样做   没办法啊    咱要他的钱    他自然要咱的命啊
那算了吧   呵呵
嘟嘟  15:13:33
你预算只有2千,你劝你直接自吻吧。
客户R  15:13:56
我们老大也是个门外汉   说几个小视频超过五千    就不提
我能咋整啊
要命
嘟嘟  15:14:08
找刀去吧。
分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 1947

  

最近被不少朋友咨询,是否能做这种手机上的场景交互型小站。特别适合微信上的病毒营销,确实看上去很炫!请用手机扫描上面大图中的任意二维码,就明白我说的是啥...

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 2545

长沙老牌的本土网站-长沙通被关站了

 刚在群里听说,长沙老牌的本土网站:长沙通因为一个帖子有问题,被关站了,于是试了一下,确实首页跳转到了:

http://www.cstong.net/cststop/index.html

现在的言论兼管是比较严呀。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1358

某帅哥A------------------------------------  14:56:51

我们有一项目   有个页面需要做几个flash动画     我们这边自己没这方面的人做   希望找个能做这个的师哥很简单的动画

 

嘟嘟----------------------------------------------------  14:58:05

我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。

 

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1438

应用于“图片数量多、体积大”页面的预加载,会给浏览者带来较好的用户体验,尤其是企业LOGO的提前显示,会让网站呈现出更完整的品牌形象。

 

点击查看DEMO页

 

优点:

1、未加载完成前,正式页面不显示。

2、自定义加载序列、自定义背景颜色变化、背景透明度。

3、参数灵活、调用较丰富,如以下3种加载画面方式。

4、站长dudu加入了时间线动画机制,可在加载原画面基础上,自定义更丰富的JS动画。

5、加载完毕后给出消息,方便自定义调用事件(如消隐掉加载动画、调用新的进场动画等)。

缺点:

- 进度计算,是以图片加载完成的张数(而不是字节数)来计算的,因此加载数字进程看上去不平均。

本测试范例使用的LOGO加载方式,加载过程中,调用了自定义“小光点向上飞行”的动画,为演示方便,只加载了2张大图,加载完成后,即撤去黑底,播放大图动画。

付费100元,可得到完整程序包,含技术文档,及得到站长技术支持。

本站长支付宝帐号:258754@qq.com

Tags: preloader jquery

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1551

之前安装chrome的花瓣网采集工具,老是失败。发现失败的根源是:

1、自己的chrome版本过低

2、无法正常连接chrome网上商店

说白了还是国内防火墙的问题。

今天得到群友共享的新的hosts文件,成功-翻*墙,把chrome升了级,从商店中直接升级了这个插件,立马成功!

 

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1848

昨天一个网站项目的实际需求:当点击“购买”按钮后,当前货物“飞向”侧边的购物车。设计要求,飞行轨迹必须是一条“曲线”。

----------------------------------------------------

配置信息:

BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件,位置在:com.greensock.plugins,我测试使用的JS有:

<script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>

TweenMax-tween核心库

EasePack-缓动库,如果没有特别缓动,可不加载

BezierPlugin-贝塞尔曲线库,必须

----------------------------------------------------

拟合输出曲线时代码示例--可用于绘制曲线,要结合canvas等绘制引擎:

//输入input:

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//输出output:

{

x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],

y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]

}

--------------------------------------------------------

曲线运动示例----结合TweenMax可直接产生曲线运动

//起点坐标不用放到代码中,以下三个点分别是第2点,第3点及终点

TweenMax.to(document.getElementById("myp"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});

-------------------------------------------------------------------------------------

本插件还有更丰富的功能调用,比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值(比如透明度、角度),详细说明如下(英文):

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5318

经测试发现jquery 1.11.1都支持IE8,但jquery2就已经放弃了对IE6-7-8的支持。

因此我决定以后就用这个:
 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
 
顺便说一下,这个CDN地址包含的库超级多,比什么百度的、360的、新浪的都要多得多了,地址如下:
http://open.bootcss.com/
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2882

这个小插件(flash cs6+as3)是我早两年偶然一个朋友给我的。可以直接在flash中调用网页,而且页面可以自由操作,相当于HTML中的iframe。

 

原作者是:

 * @author 五斗米

 * @see http://zwwdm.com

 * @date created 2012/12/24/

查看更多...

分类:flash技术探讨 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1406

 http://www.zzylfz.com/这个今天刚上线的项目中,用到了一个“白云不间断向左飞动”的效果,步骤就2个:

1、制作一个边缘连续的“白云层”,要非常宽以适应较大的显示屏幕;

2、以用下JS来驱动background-position-x

XML/HTML代码
  1. TweenMax.to($('.cloud'),97,{'background-position-x':'-2392',ease:Linear.easeNone,repeat:-1});  

------------------------------------------

另外还用了一个视差效果,当鼠标左右移动时,鸽子和文字会微微的左右摆动。使用的是jquery.parallax.js这个脚本。

分类:我们的作品 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 1840

canvas+createjs制作满天星星旋转效果

canvas+createjs+tweenmax制作满天星星旋转效果,效果跟FLASH类似,但完全兼容IOS设备,已经在IPAD上做过测试。这种制作的主要目的,是为了寻找一种可以代替FLASH的动画方式。

查看更多...

Tags: canvas cr&#101;atejs 星星旋转效果

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3924