w3cTrain

Keep Moving

https://dn-w3ctrain.qbox.me/wwdc15.jpg

每年,苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。

每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。

WWDC 15 invitation

苹果的图标通常都会使用颜色和形状的叠加,比如iOS 7 Photos图标。今年WWDC邀请函用了上面这货。

它由一些列层叠和半透明的形状构成,非常适合用HTML和CSS来实现。

Planning: HTML

设计这样一块负责的东西需要稍微分析一下。首先,我把它分解成各个部分。
大方向看它是由三种形状构成的,主要图形为8个大圆,我先把它们列出来:

Read More...

有天,我坐在电脑前。
你走过来问我,你的电脑里面有没有AV。
我说,我没有,但是我可以随便黑了别人的电脑看看他们有没有。
不要问为什么,因为我是程序猿啊!

我旋转座椅,手速超快,瞬间代码满天飞。

片刻,我copy了一份小泽玛利亚的全集,拿给你,从你求鸡若渴的眼神里我能看出你很仰慕我的h4ck3r sk1llz。

;-),想学啊你,我教你啊!

点击这里

DIY?

Github地址在这里修改kernel.txt文件即可。

我用了CSS和一点JavaScript来演示如何生成”汉堡包”动画。

http://w3bits.com/wp-content/uploads/animated-hamburger-icons.jpg

前面的文章中,我把我对导航栏菜单(也被成为”汉堡包图标”)的动画灵感发布出来。结果收到了不少粉丝的称赞,我先谢谢你们了。

我决定在这方面下多点功夫,于是我写了一系列不同的动画实现方式。在这片文章中,你将会看到6个不同”汉堡包”动画的增强版。

我使用了一点JavaScript来触发动画,在继续研究下去之前,你可以先看看Demo (译者:如果打不开,请点击文章最下面的Demo)

Read More...

card
当我们使用CSS3动画时,我们经常讨论如何使用创造过渡,动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的,而是多个动画结合起来,创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。

迪斯尼的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实,风格,和动画的物质叠加起来创建生动的角色,使得观众觉得真实而有趣。

card
它是一种被应用于stripe并造成巨大影响的技术。stripe是一种付款处理器,并提供了工具,在网站的嵌入支付形式。这些形式被设计得非常精美,特别是其使用的动画。

Read More...

推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS transitions。今天使用CSS动画的steps方法来重建这个动画。

错觉

这种效果跟西洋镜的原理差不多,都是呈现一系列的帧,形成动画的效果

Demo

鼠标移到星星上面触发动画:

See the Pen Twitter fave animation by Helkyle (@HelKyle) on CodePen.

Read More...

虽然现在有大量的插件可供我们选择使用,但实际开发过程中,使用别人的插件难免会带来问题,比如

  • 插件功能强大,代码行数也随着激增,但是我们只使用其中一小部分。
  • 使用别人的插件,很难看懂别人的代码,特别是压缩成min.js,为后期维护,需求变更等带来很严重问题。
  • 同样想在现有插件上做进一步开发也没那么容易。
  • 装逼

所以学习jQuery插件开发很有必要。

自定义插件的类型

自定义插件的类型主要有两种(我猜的),分别是级别插件和对象级别插件。当然还有一种通过工厂模式生产的,基本上没人用,所以就不管了。

1. 类级别插件

类级别插件比较简单,通过$.extend()直接给jQuery添加静态方法,通过$.extend()来扩展,调用方法形如

$.ajax(),$.trim(),$.each()等。

Read More...
191011