(2017-02-06 15:09)
标签:
陈在真
腾讯公益
新年小福神
灶王爷
it
|
分类:
项目分享
|
大家新年快乐,赶一波福利给大家拜年,老板们新年好哇(๑¯∀¯๑)...预祝老板们元宵节好哇(๑¯∀¯๑)...
一不小心,年前又赶了个项目,为何说赶,毕竟预留了半个月开发哇…额…半个月都顶不住天天调整设计稿好伐…这要加页那要加动画,弹层啥的加的加砍的砍,叠了几个方案后还是第一个方案好的那种心情,还不是最惨烈的,最惨烈的是设计师拿把戒尺在你面前量,告诉你某段文字在手机上有1mm的偏移,那个心情,说多TMD全是泪好伐T.T…
项目二维码:
http://s4/mw690/0028EWAZzy78zcmFYAz23&690
按惯例的阐述下项目背景:
腾讯公益新年小福神项目,年初一的时候在朋友圈推广,通过召唤不同小福神,传递福运的方式,给贫困山区的小孩,或者抗战老兵,或者先心儿童捐赠红包,邀请大家献爱心的活动。每个捐赠项目会对应一个小福神,比如
(2016-11-17 14:36)
标签:
陈在真
we大会
js动画
cssanimate
探照灯
|
分类:
项目分享
|
最近研究一些图片格式的转换,然而放到项目里面兼容不大理想,成效不大,感觉自己在兜圈子,迷茫ing...鉴于很久很久没有更新博客文章了,毕竟上一篇文章也是去年4月份的了,更新一下,满足下连我自己都不知道有没有的
真粉 需求…呵呵哒…
这阵子忙的大一点的项目,应该算 WE大会,那就说下它呗,先上个链接:
WE大会
大概的交互流程是这样的:用户进入官网,会播放一段开场视频,伴随着带感音乐,然后主题渐显,今年2016的主题是
无境,镜子相关的题材,至于当时脑爆的时候各种镜子哲学逻辑特效什么的,这里就不多说,毕竟前端文章,不能给姚老板,LEO,扎扎他们太多机会秀场,额呵呵q(๑¯
ε ¯ ๑)p…
开场首屏还是很重要的,用户的第一印象分就打在这了,大背景渐隐渐显效果,从三棱镜切换六棱镜再切换五棱镜的变幻,契合主题用,此处做了一个鼠标探照灯的特效,如下图所示:
(2015-04-06 10:38)
标签:
audio
陈在真
音频
html5
音效
|
分类:
HTML
|
不要被这么文艺的标题吓到,这里不会跟你讲述中学时期泡妞史,也不会有其它什么现实不该有而小说噼里啪啦不能没有的坑爹情节,请注意,这是一篇技术类文章,主要讲的是:音频在移动端的兼容问题,至于为什么标题要起的这么文艺,这只是为了迎合下这条微博而已:
http://s15/mw690/0028EWAZgy6RhV3abzU5e&690
神马?你还没关注我新浪微博 -
桑尼真
?果断走起吧,我不会晒自拍刷屏不会买面膜,有的只是吐槽跟技术类的分享,欢迎关注…
好了,前面按惯例废话了不少,下面我们来说下,音频在移动端的那些坑,坑的具体表现与填坑方式…
我私自把 音频分两种,背景音乐与音效音乐;
一、背景音乐
背景音乐,就是贯穿整
(2014-12-30 16:14)
标签:
css3
陈在真
webank
动画
微众银行
|
分类:
CSS3
|
看着快过年了,项目赶了一波又一波,总结什么的必须的,就当给大家的贺岁礼哈;
说到项目总结,必须提及WeBank前海微众银行项目,怎么说我在WeBank项目投入了很大的精力,当然没有一起奋战在最前线的交互/设计好基友们一起,也做不出这样一个突破,为何说突破?如果我说一个手机页面,样式代码:1395行,样式体积:126k,纯手写,你信吗?我不会告诉你前面已经做了几版KO版,别人说多都是马赛克,我说多都是泪哎…
老规矩,有地址有真相,请扫二维码体验下先:
http://s3/mw690/0028EWAZgy6OGCwU3aWb2&690
这是其中一屏,我比较喜欢的一个动画“想走就走”
http://s16/mw690/0028EWAZgy6OGDPpEV
(2014-03-10 18:47)
标签:
css3
transition
权衡
重构
陈在真
it
|
分类:
项目分享
|
介于实在有点忙,打2013.10.30更新项目优化总结文章到现在,中间情节波澜起伏,动人心魄,有悲伤郁闷到想轮椅子砸人过,也有兴奋激动到想轮椅子砸人过,其实我并不是大家所想的那么具有暴力倾向的动不动就轮椅子砸人的不良少年,至于为什么呢,‘少年’用词错了,应该是不良青年哈...
这个不良青年介于今晚要发页面版本,而又刚好解决了一天的bug坐等发布不能离席的时刻,对于最后碰到的一个联调bug展开了无限遐想,首先,说下话题的起源,是什么bug:
http://s5/mw690/0028EWAZgy6HcBKI5h294&690
新版的好莱坞是有两个宽度版本根据浏览器宽度切换的,然而在播放页的评论这里,有个bug,当窗口由宽切到窄的时候,评论框宽度会有个transition
动画过渡,而在chrome,会出现渲染问题,性能稍微差点的机子,可能就会出现,而调这个,其实也很简单,就不要transition呗,你是这样想的,对吧?当然,我也是这样想,不过这个
(2013-10-30 11:43)
标签:
陈在真
好莱坞影院
项目优化
内存占用
背景图片优化
|
分类:
项目分享
|
不知不觉做好莱坞项目已经一年多了,打从接手后就一直迭代重构开发,新需求新页面的一直滚版本,表面看好像正常进行,其实内部已经有点混了,就在前不久,然后一个同事在群里反馈:
http://s12/mw690/74d6ceddgx6DrcTIc7Veb&690
于是乎,一场大扫除来袭了...
开启心爱的YSLOW 评分73 截图如下所示:
http://s2/mw690/74d6ceddgx6DrbcdrJTc1&690
前端重构可控的问题,主要表现在:
1、页面图片过多;
2、页面图片尺寸偏大;
3、页面背景图片http请求过多;
4、背景拼图过大;
5、sprite拼图不合理;
6、html dom节点过多。
(2013-01-23 16:07)
标签:
陈在真
css3
transform
animation
蝙蝠侠
|
分类:
CSS3
|
好久好久好久没有更新博客文章了,这篇也是好久好久好久前写的了,本来打算发布到某个官网发,不过审核没过...亏我还连夜设计了一个吊爆的造型做成Banner,TNND,以后有东西直接发,投个鬼稿...下面是我传说中的Banner:
http://s1/mw690/74d6ceddg7b980a0fd4b0&690
蝙蝠侠套装 给力吧...啊哈哈...还是进入正题,说说这篇文章吧:
自从接手好莱坞影院到发版(前阵子已经更新多一版了 T.T ),除了完成页面重构、项目需
(2012-08-14 09:21)
标签:
陈在真
css3
蒲公英
dandelion
飘散
|
分类:
CSS3
|
前几天云之家发版,没有之前那么忙,具体可以查看我这篇文章《
CSS3渗入-金蝶微博改版云之家》,而现在又是一个酝酿创意的休渔期...
前几天同事买了只新手机,在电梯里,说到微信的摇一摇,又说道TX微博也有个类似的功能,叫吹一吹,然后就演示了下,效果很漂亮,也触动我心底那根弦...蒲公英...
初中的时候班里有个高材生的文章就有过一个蒲公英的比方,离家守卫边疆的战士犹如随风漂移的棉絮,漂泊远离故乡,落地扎根...而如今我也如此,即将飘离而去,当然我不是得了什么绝症,那是坑爹韩剧里面才有的剧情,这个你看我暴力扣杀200km/h的羽球球速(纯属YY)就知道了...
闲话少说,看看效果图先吧...
http://s14/middle/74d6ceddgc720200b8f6d&690
(2012-07-03 10:59)
标签:
腾讯首页改版
引导动画
板块调整
空间
间隙
行高
颜色
隔行换色
侧重点
it
|
分类:
吖真拙见
|
刚开了个部门会议,回来看到QQ有老基友发了留言给我,说:
“
.腾讯首页改版动画
http://www.qq.com/
.我以为是html5
.原来是flash
”
然后我就点上去看,是html5还是flash暂不讨论,发现一些我看到的关于前端的东西,分享出来...
1、引导动画
以纸飞机的形式:“是你 一直驱动我们前行”、“新版腾讯网
为你而来”、过去的就如同纸一般飞走,而迎来的是一架具有新内容的灰机,过渡和谐,创意十足,有新旧迭代的层面,又不乏“用户”的体验,因为它是“为你而来”...
2、板块/细节
板块调换增删,其实我不是一个爱看新闻的人,看也只是看美眉写真图片相册,对于满是文字的东西很枯燥,当然除非是我感兴趣的文字...这一块我也是在飞机折叠的瞬间截图,再跟新版对比的,就我看到的不同有以下几个小点:
1)头部导航top
(2012-05-16 19:38)
标签:
玻璃瓶
四叶草
水母
border-radius
box-shadow
gradient
凹面
伪类
|
分类:
CSS3
|
这个idea的最早萌发与看了某个博客的某篇文章的某个效果,具体的忘记在哪里看的了,当时看到的是一个loading的效果,但是里面用了一个堆图片标题确实纯css3
loading之类的,看不上很顺眼就想自己做,做了两个出来后,就是那种竖线从左到右变色那种loading,还有圆形打圈转转转那种,然后写着写着突然有个idea,如果把圆圈换成心形,围6-8个转圈的话会怎么样,然后我就做了,拼了四个之后,我突然又不想做loading的效果了,因为做出来的效果很像一颗四叶草,如图:
http://s16/middle/74d6ceddgc01e72bf037f&690
很可爱吧,我也这样觉得哈...然后我就给加多了个四叶草的花茎上去,但是单单一株四叶草很单调,所以就画多了一个玻璃瓶,结果本来打算文章题目是《四叶草》的,然而玻璃瓶有点喧宾夺主了,于是并列吧
《玻璃瓶与四叶草》,这就是这篇文章的灵感由来...
说了这么多篇外话,下面进入正题,按惯例先上效果图: