2018年07月22日 by 张 鑫旭 阅读 28817 次, 今日 25 次
在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition
过渡或者animation
动画都可以时间我们想要的效果。
但是,在<canvas>
中却没有这么简单,因为<canvas>
本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。
本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。
阅读全文…
标签: animation, getComputedStyle, hsla, RGB, rgba, 动画, 颜色
发布在 Canvas相关 | 3 条评论 »
2018年07月14日 by 张 鑫旭 阅读 32465 次, 今日 24 次
夏日炎炎,今天宅在家里刷微博的时候,刷到了个关于信息流广告的视频,说的是某产品信息流在阅读时候,后面会腾空出现广告,就像广告一直藏在你信息流的背后一样,随着你滑动,广告会慢慢看不到。这个广告效果在web中该如何实现呢?
我就把几个idea都试验了下,发现都可以实现类似的效果,一起来看看吧……
阅读全文…
标签: background-attachment, fixed, fixed定位, visibility, z-index
发布在 CSS相关 | 8 条评论 »
2018年07月14日 by 张 鑫旭 阅读 57556 次, 今日 34 次
B站,或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言,是很有用的,说夸张点是延长了我们的生命,哈哈哈。
对于一个靠技术吃饭人,总免不了关注点在技术实现上,究竟是如何实现的呢?且看~
阅读全文…
标签: HTML5, playbackRate, video, 倍速, 视频, 速率
发布在 HTML相关 | 16 条评论 »
2018年07月14日 by 张 鑫旭 阅读 36809 次, 今日 25 次
之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。
阅读全文…
标签: focus, tabindex, 交互, 可访问性, 弹框, 按钮, 无障碍网页应用, 键盘
发布在 Web综合 | 14 条评论 »
2018年07月8日 by 张 鑫旭 阅读 30751 次, 今日 24 次
原本以为canvas元素尺寸和img元素一样,结果深入一研究发现,还是有不少差异的,有兴趣可以进来看看,说不定可以学到点东西。
阅读全文…
标签: canvas, height, px, width
发布在 Canvas相关 | 10 条评论 »
2018年07月5日 by 张 鑫旭 阅读 36698 次, 今日 27 次
Chrome以及Safari等浏览器下,有时候event.preventDefault()
回报”Unable to preventDefault inside passive event listener due to target being treated as passive”的错误,有没有什么办法解决呢?本文就将提供几个解决之道,顺便介绍一些你可能不知道的CSS属性或者JS事件参数。
阅读全文…
标签: fastclick, iOS, passive, Safari, touch-action, zoom, 单击事件
发布在 Mobile相关 | 15 条评论 »
2018年06月23日 by 张 鑫旭 阅读 54990 次, 今日 25 次
本文展示了2个自己写的酷酷的3D开门动画效果,然后顺便介绍了3D动画实现的一些相关技巧。本文有demo,有视频效果展示,还有必要的源代码讲解,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: 3d, 3D效果, css3, perspective, transform, transform-style, 动效, 动画
发布在 CSS相关 | 12 条评论 »
2018年06月12日 by 张 鑫旭 阅读 60015 次, 今日 22 次
LuLu UI是阅文前端荣誉出品的UI框架,基于jQuery,针对PC网站,兼容IE8+,包含20+静态或动态UI组件,非常适合面向外部用户的网站开发。
具有贴近用户,上手简单,使用场景广泛,成熟,体验好等优点,面向设计,方便体验侧前端同学进行开发,方便设计师视觉还原和创意实现,在PC端用户侧网站开发上,LuLu UI有着不可匹敌的竞争力!
阅读全文…
标签: LuLu, UI, ui框架, UI组件库, 屏幕阅读器, 无障碍网页应用, 框架, 用户体验, 键盘
发布在 jQuery相关 | 56 条评论 »
2018年06月11日 by 张 鑫旭 阅读 72764 次, 今日 41 次
steps()有一定的学习难度,很多概念总是搞不清楚,所以本文算是个自我挑战,看看能不能说清楚steps()中的相关概念,方便大家理解与学习。本文有些篇幅,有些深入,如果您时间较紧,可以先马后看。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: animation, animation-fill-mode, animation-timing-function, css3, cubic-bezier, step-end, step-start, steps
发布在 CSS相关 | 18 条评论 »
2018年06月6日 by 张 鑫旭 阅读 50369 次, 今日 25 次
微信更新后,发现多了个悬浮窗功能。公众号阅读,网页浏览回退后默认会出现。再点击,可以回到刚才阅读的地方。于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。
其交互效果,也被不少人称赞。例如,窗口会收缩到悬浮按钮中,悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢,使用web前端技术也是可以实现,有demo,有截图,有必要的源代码展示,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: clip-path, drag, drop, grayscale, transition, 交互, 图片剪裁, 微信
发布在 JS实例 | 18 条评论 »