找到适合自己的前端发展方向

2016年08月26日 by 张 鑫旭 阅读 62561 次, 今日 224 次

前端发展迅猛,除了自身更加厚重外,往前以及往后都有了发展和延伸,当前对前端的要求更高,而人的精力总是有限的,这个时候,就需要我们把有限的精力放在更适合自己发展的方向上,那应该放在哪个方向上呢?本文就将通过我自身的经验、观察和认识,为大家指明前进的道理。

阅读全文…

canvas 2D炫酷动效的实现套路和需要的技术积累

2017年03月18日 by 张 鑫旭 阅读 1836 次, 今日 230 次

目前在web领域,基本上看到那些酷酷的2d动效,都是canvas实现的,flash已经基本上都被淘汰了,canvas效果的实现,无需安装任何插件,IE9及其以上浏览器支持,至少在移动端,大家可以放心大胆使用,甚至webGL 3D效果都可以尝鲜。

无论是雪花飘,星星动还是粒子飞,其canvas实现都是一样的套路…

阅读全文…

【翻译】借助SVG实现背景透明JPG图片

2017年03月9日 by 张 鑫旭 阅读 3921 次, 今日 161 次

人物往往色彩丰富,有时候会遇到需要背景透明的场景,结果PNG24图片尺寸太大,PNG8质量太差,JPG尺寸最小效果还好,但是背景又不透明,有没有什么办法就有JPG的小尺寸好效果,同时背景透明呢?本文的处理技巧可能会对你解决相关问题提供一些思路。

阅读全文…

使用CSS offset-path让元素沿着不规则路径运动

2017年03月5日 by 张 鑫旭 阅读 3597 次, 今日 138 次

在web端,要让一个元素按照特定的路径运动,在之前,基本上只能借助于SVG SMIL animation来实现,但是,随着浏览器的发展,CSS代码也能实现这样的功能,本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

了解CSS属性font-kerning,font-smoothing,font-variant

2017年02月23日 by 张 鑫旭 阅读 3007 次, 今日 54 次

本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothingfont-variant

阅读全文…

“蝉原则”与CSS3随机多背景随机圆角等效果

2017年02月17日 by 张 鑫旭 阅读 4776 次, 今日 64 次

在web设计或交互实现的时候,随机效果是非常常见的,比如说我们希望我们动画看上去运行的是更随机,则可以把动画分解为多个维度,例如水平移动,垂直移动以及旋转缩放等,然后不停的循环,然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”,这样最后实现动画效果就显得非常随机以及丰富等。

阅读全文…

小tips: 页面链接跳转历史URL不记录的兼容处理

2017年02月15日 by 张 鑫旭 阅读 4579 次, 今日 86 次

我们点击首页的“分类”进入分类页,然后分类页头部有个“男生”“女生”的频道切换,这两个都是直接的链接,如果就会带来这么一个问题,如果用户在“男生”“女生”的频道之间反复切换,则当我们点击左上角的返回按钮(如下图)的时候,就会发现点击很多次还是在“分类页”上,这其实是不符合用户预期的,正常的用户预期应该是点击左上角的返回按钮应该直接回到首页,而不是还在当前页过家家。

要实现思路并不难,就是“男生”“女生”频道切换的时候,URL地址不要进入历史URL记录堆栈,但如何实现同时保证各个浏览器都兼容是个问题,本文就将展示相关的实践,希望对大家的学习能够有所帮助。

阅读全文…

基于CSS3 column多栏布局实现水平滑页翻页交互

2017年02月15日 by 张 鑫旭 阅读 5393 次, 今日 68 次

column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。

而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~

阅读全文…

JS获取上一访问页面URL地址document.referrer实践

2017年02月13日 by 张 鑫旭 阅读 5894 次, 今日 165 次

但是最近做了一个移动端项目,是我第一次在正式项目中使用document.referrer,这里跟大家分享一下相关的实践。

场景是这样的,移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求,几乎所有的内页都有这么一个返回上一页的按钮。大部分场景下,上面办法可以满足我们的交互需求,但是,在有些时候……

阅读全文…

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

2017年01月25日 by 张 鑫旭 阅读 8456 次, 今日 87 次

开源两个起点中文网M站两个动效交互JS,封装良好,即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果,另外一个是基于窗体的下拉释放加载刷新效果。

阅读全文…

基于VoiceOver的移动web站无障碍访问实战

2017年01月20日 by 张 鑫旭 阅读 3444 次, 今日 30 次

所谓“无障碍访问”,指的是各类设备均可以无障碍访问。例如鼠标、键盘、读屏软件或设备等。

ARIA全称“Accessible Rich Internet Applications(可访问的富互联网应用)”。

VoiceOver是苹果设备上的读屏软件,当开启VoiceOver后,交互行为和通常行为是不一样。并且和ARIA属性之间的关系也比较深,本文就将通过项目实战展示基于VoiceOver的移动端ARIA特性和注意事项。

阅读全文…