做有态度的前端团队

网易FEG前端团队

2015年5月

  • css3星球椭圆运动

    上一个项目里碰到了要写一个星球运动的动画,其中主要的点就是用css3如何实现椭圆运动。上网找了很久,看到一个“css3太阳系”的文章介绍,但可惜是正圆的,给人的感觉是平面,不适合。实在找不到,就自己想了些思路: 思路一:写个正圆的运动,然后用scale来变形。实践证明是不可行的,这样变形会导致里面的星球发生严重变形。 思路二:把星球同时做X轴和Y轴的位移运动。根据抛物线的原理,这个方案貌似可行。最后实践证明原理是这样,但有些地方需要留意下,否则会变成菱形运动了。 先看一下效果图吧: 失败实践: 先来看下椭圆的坐标示意图: 所以,一开始的想法就是,从原点o出发(分别给x、y轴......

    CSS

  • FIS插件制作说明

    FIS插件制作说明 虽然FIS在使用的过程中,几乎能解决我们遇到的所有前端问题,但总是会有一些特殊的问题是解决不了的,然后就需要上网去找能解决特殊问题的插件,不过一般都是找不到(不然就不叫特殊问题了),所以我们需要自己写插件来实现 一、FIS的运行过程与插件运行的时机 看上面的官网提供的图,就能大致知道原理了,也可以清楚看到,插件基本可以分为编译期间的、打包期间的 二、插件命名方式 举个简单的例子:fis-postpackager-supply 一定是fis打头 中间的postpackager表示插件的执行时机,详情可以参考上面的图 最后的supply就是插件的名字,这个你......

    工具

  • css3逐帧动画-飘动旗子

    写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是使用连贯性的ease动画。我们熟悉的animation动画有·ease·、·ease-in·、·ease-out·、·linear·、·cubic-bezier·等过段函数,当然还有我们可能不是很熟悉的·steps·跳帧函数。我们在做一些特殊的动画,比如一个飘动的旗子、一个奔跑的小人,这些动画不需要补间,这时候需要的是跳帧·steps·。 逐帧动画实现方法: 1、把动画帧切图合并在一起 2、通过CSS3的animation控制background-position 方法很简单,这里使用到......

    CSS

  • 一个通用广告脚本数据加载的容错

    最基本的需求 写一个通用的广告脚本文件,传递不同的广告ID,加载对应的数据出来,上报数据,最后显示出来 最简单的做法 每个站点,直接请求广告地址,带上不同参数,例如这样: var script = document.createElement("script"); script.src = 'ad.com?id=id1&callback=cb'; document.body.appendChild(script); function cb(param){ //do something ......

    JavaScript