一行CSS实现滚动时藏在信息流后面的广告效果

2018年07月14日 by 张 鑫旭 阅读 4230 次, 今日 93 次

夏日炎炎,今天宅在家里刷微博的时候,刷到了个关于信息流广告的视频,说的是某产品信息流在阅读时候,后面会腾空出现广告,就像广告一直藏在你信息流的背后一样,随着你滑动,广告会慢慢看不到。这个广告效果在web中该如何实现呢?

我就把几个idea都试验了下,发现都可以实现类似的效果,一起来看看吧……

阅读全文…

揭秘视频网站video视频倍速播放的实现

2018年07月14日 by 张 鑫旭 阅读 2987 次, 今日 88 次

B站,或者腾讯视频等主流视频网站视频现在都支持倍速播放功能。这个功能对于当下快节奏的生活而言,是很有用的,说夸张点是延长了我们的生命,哈哈哈。

对于一个靠技术吃饭人,总免不了关注点在技术实现上,究竟是如何实现的呢?且看~

阅读全文…

实力科普:为什么浮层或弹框一定要有叉叉关闭按钮?

2018年07月14日 by 张 鑫旭 阅读 3141 次, 今日 234 次

之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。

阅读全文…

canvas HTML属性尺寸和CSS尺寸多个细节深入

2018年07月8日 by 张 鑫旭 阅读 2436 次, 今日 24 次

原本以为canvas元素尺寸和img元素一样,结果深入一研究发现,还是有不少差异的,有兴趣可以进来看看,说不定可以学到点东西。

阅读全文…

小tips: touch-action简介与treated as passive错误解决

2018年07月5日 by 张 鑫旭 阅读 1837 次, 今日 28 次

Chrome以及Safari等浏览器下,有时候event.preventDefault()回报”Unable to preventDefault inside passive event listener due to target being treated as passive”的错误,有没有什么办法解决呢?本文就将提供几个解决之道,顺便介绍一些你可能不知道的CSS属性或者JS事件参数。

阅读全文…

CSS CSS3实现3D开门动画效果

2018年06月23日 by 张 鑫旭 阅读 5668 次, 今日 63 次

本文展示了2个自己写的酷酷的3D开门动画效果,然后顺便介绍了3D动画实现的一些相关技巧。本文有demo,有视频效果展示,还有必要的源代码讲解,希望本文的内容能够对您的学习有所帮助。

阅读全文…

是时候好好安利下LuLu UI框架了!

2018年06月12日 by 张 鑫旭 阅读 11086 次, 今日 50 次

LuLu UI是阅文前端荣誉出品的UI框架,基于jQuery,针对PC网站,兼容IE8+,包含20+静态或动态UI组件,非常适合面向外部用户的网站开发。

具有贴近用户,上手简单,使用场景广泛,成熟,体验好等优点,面向设计,方便体验侧前端同学进行开发,方便设计师视觉还原和创意实现,在PC端用户侧网站开发上,LuLu UI有着不可匹敌的竞争力!

阅读全文…

CSS3 animation属性中的steps功能符深入介绍

2018年06月11日 by 张 鑫旭 阅读 5757 次, 今日 39 次

steps()有一定的学习难度,很多概念总是搞不清楚,所以本文算是个自我挑战,看看能不能说清楚steps()中的相关概念,方便大家理解与学习。本文有些篇幅,有些深入,如果您时间较紧,可以先马后看。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

微信网页悬浮窗交互效果的web实现

2018年06月6日 by 张 鑫旭 阅读 11843 次, 今日 44 次

微信更新后,发现多了个悬浮窗功能。公众号阅读,网页浏览回退后默认会出现。再点击,可以回到刚才阅读的地方。于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。

其交互效果,也被不少人称赞。例如,窗口会收缩到悬浮按钮中,悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢,使用web前端技术也是可以实现,有demo,有截图,有必要的源代码展示,希望本文的内容能够对您的学习有所帮助。

阅读全文…

《CSS世界》女主角诚寻靠谱一起奋斗之人

2018年06月5日 by 张 鑫旭 阅读 10343 次, 今日 41 次

上图这位美女诚寻靠谱一起奋斗之人,详细信息见文章介绍……

阅读全文…