Clik here to view.
【转载】自定义元素简介
本文转载@米粽 (Leo Deng)翻译@EIJI KITAMURA的《Introduction to Custom Elements》。如需转载，烦请注明出处：http://webcomponents.org/articles/introduction-to-custom-elements/。中文地址：http://www.w3ctech.com/topic/867。HTML 是 Web...
View ArticleClik here to view.
Web动画API教程5：可爱的运动路径（Motion Path)
这是介绍浏览器中web动画API的系列教程的第五篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson。这篇文章的一个比较早期（简单）的版本在我的CodePen Blog上也有，在Chrome声明支持Motion Path之后发表的。终于。沿路径的动画，不再是SVG的专利！Motion...
View ArticleClik here to view.
Web动画API教程: 总结
这是介绍浏览器中web动画API的系列教程的总结篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson。我们前面已经讲解了很多内容，而且希望能够解决Web动画API到底是什么的问题。在总结这个系列时，我们将回顾一下我们已经讨论的内容，然后再看一下有哪些内容还没有实现的。为什么这么费心API呢？...
View ArticleClik here to view.
如何创建自定义的HTML元素
HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScript API创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元素和定义他们需要的JavaScript...
View ArticleClik here to view.
TimelineMax：入门
TimelineMax是GASP的一部分，用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列（如CSS属性和SVG），而且你不需要对JavaScript非常熟练。本系列教程将从非常基础的知识开始讲起，介绍TimelineMax库和它的基础语法，再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中，我们将使用一些实际的dem...
View ArticleClik here to view.
TimelineMax: 理解Mechanics
先来看一下一些名词定义？Mechanics的定义是：关注对象受力或位移的行为的区域，以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法，有时候也被描述为a project...
View ArticleClik here to view.
TimelineMax：Tweening简介
在以前，动画Tweening是描述一帧一帧序列的术语，有时候也被称为in-between。放置在一个运动结束，要进行下一个运动前，中间创建一个流畅的过渡。年纪比较大的同学可能会记得Flash；这个应用程序在引用帧移动时使用了这个术语。我们先来仔细观察几个示例。TweenMax创建的Tweening在本教程的两个示例中，我都加载了TweenMax.min.js，以获取TimelineMax，以及所有G...
View ArticleClik here to view.
TimelineMax：使用addPause()控制播放
在这篇教程中，我们将学习如何控制动画，根据需求，使用一个叫做addPause()的方法。准备好了吗？开始吧！addPause()addPause()方法是一种控制方法，允许开发者在时间轴上的任何位置放置一个暂停。这比使用一个回调函数来暂停另一个函数要精确得多（这是在addPause()出现之前大家不得不采用的方法）。这个控制方法还可以插入一个特殊的回调，在特定的时间戳或标签暂停时间轴的播放。这样做有...
View ArticleClik here to view.
TimelineMax：学习使用Bézier Tweening
当你需要一些比较高级的功能的时候，GSAP的插件是非常棒的。我在这篇教程中介绍的BezierPlugin插件，可以使得几乎所有的属性沿着一条由一组点/值定义的贝塞尔曲线路径运动。在正式进入学习之前，我们需要先花点时间来学习贝塞尔曲线到底是什么，以及它是如何诞生的。贝塞尔曲线回到手绘时代，平面设计师肯定对下面的工具非常熟悉，也就是“曲线板”。这些形状奇怪的板子（通常是薄塑料）帮助引导设计师们创造优美的...
View ArticleClik here to view.
【转载】15年双11手淘前端技术巡演 - 前言
本文开启了2015年双11手淘前端团队技术分享旅程，这是整个系列的第一篇，由手淘前端团队总架@岑安写的前言，如果您想知道双11手淘前端团队使用哪些技术，如果您想了解手淘更多相关技术，欢迎持续关注相关更新。15年双11刚落下帷幕。今年众所周知，是全面“无线化”的一年。数据上我就不说了，可以公开的数据我相信大家多多少少也从各方都了解到了。在整个阿里体系内，无论技术还是业务，都会把每年的双11当作一个战场...
View ArticleClik here to view.
Sass操作符
在本文中，我们将会解析一下 Sass 中的操作符。赋值操作符Sass 使用冒号（ :）来定义一个变量：$main-color: lightgray; 算术操作符算术操作符用于执行数学计算，下面是 Sass 所支持的算术操作符：操作符简介+加-减*乘/除%取余在下一小节中你会发现，+操作符也可以用来拼接字符串。注意，上面的操作符只能用于单位相同的数值运算：h2 { font-size: 5px +...
View ArticleClik here to view.
Sass的表达式和控制命令
如果你深入地使用过 Sass，那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们，但是熟悉一下这些指令，可能会有意想不到的收获！if()if()是 Sass 的一个内建函数，与之相似的 @if则是一个内建指令。if()用来做条件判断并返回特定值，示例如下：@mixin...
View ArticleClik here to view.
【转载】对无线电商动态化方案的思考（一）
如题，接下里的一段时间里，我会从无线电商动态化的角度谈一谈自己的理解和思考无线电商动态化无线首先要谈的是无线，或者说移动。手机和传统桌面端计算机有着非常大的不同，首先是随时随地，这样它就需要同时也可以拥有更多的传感器，比如镜头、体感、定位、蓝牙、NFC...
View ArticleClik here to view.
如何使用SVG图案
图案是非常常用的设计元素。它可以提供对比，创建一个深度感，并给组合添加趣味。SVG可以很方便地创建和使用图案，随心所欲~我上次提到了这周要讨论一个可以定义并重用的元素，就是pattern啦。这篇文章我们要讨论<pattern>元素，以及如何在SVG中使用这个元素。大概会讲SVG图案的基础，然后下一篇讲解如何创建复杂一些的图案。SVG图案SVG图案一般用于SVG图形对象的填充fill或描边...
View ArticleClik here to view.
SVG图案:通过图片、属性和嵌套构建更复杂的图案
网页设计元素之一——图案，通常是使用图片创建的。虽然一些图案可以使用CSS创建，但大多数还是涉及某种形式的图片。幸运的是SVG可以很容易创建简单和更复杂的图案，还可以缩放，而且需要很少的http请求。上一篇文章中我们大概看了SVG<pattern>元素的基本内容和属性。通过一个示例展示了如何创建简单的图案。以及简单地介绍了几个<pattern>元素的属性。今天我们继续讨论几个...
View ArticleClik here to view.
使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更...
View ArticleClik here to view.
如何创建SVG箭头和polymarker——`marker`元素
一个常见的使用SVG绘制的图形是箭头。一行代码就可以创建一个，但是这样代码重复度很大。你也可以在<defs>和<symbol>中定义好再去重用，但是你每次应用的时候都需要对其移动或旋转。直接用一个<marker>元素的话会方便很多。前面几周的时候我讲过如何组织SVG代码，以及如何定义一个可重用的图形对象。可以翻一下w3cplus上SVG系列文章进行学习~今天我想要...
View ArticleClik here to view.
创建和导出SVG的技巧
我们在响应式网页设计的工作中经常用到SVG，这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式，在图形编辑器中创建SVG效果的每一步，都会直接影响生成的代码以及负责嵌入SVG代码、编写脚本或添加动画的开发者的工作。在我的日常工作中，我通常是既做设计师又做开发者，自己处理自己设计的内容，而SVG图像就是我的日常开发内容之一。我之前做的...
View ArticleClik here to view.
如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法（戳这里学习SVG填充和描边的相关内容）。你可以使用纯色、图案或渐变。前面两种方法我们之前已经讲过了，现在我们来讨论第三种方法——渐变。SVG提供了两种渐变——线性、径向。我今天先讲线性渐变，下篇我们再看看径向渐变。SVG线性渐变如果你看过这系列的SVG之前的文章，你应该对这里渐变的很多概念都比较熟悉啦。在<defs>中定义，然后在后面把它们作为填充或...
View ArticleClik here to view.
如何给SVG填充和描边应用径向渐变
和图案一样，渐变可以给作品增加深度和趣味。虽然当前的趋势是扁平化设计，渐变还是很经常使用的。上节我们大概讲了线性渐变的内容。今天就到径向渐变啦。径向渐变和线性渐变是很相似的，区别只是在于如何定义渐变。SVG线性渐变上篇文章中也提到，如果你理解了线性渐变的原理，学习径向渐变是很容易哒。使用<radialGradient>元素定义径向渐变，以及一些相关属性。我们还是一样，从一个简单的例子开始...
View Article