在日常的学习中我接触到一些HTML5 Canvas动画,在开发 tiomg.org 太美在线工具网站 的时候,想将这些震撼或小清新的动画融合到工具网站中,这样可以使原本单调的网页看起来丰富和更有设计感。
网站发布后,有程序开发的小伙伴和站长询问怎么实现的,我也乐于分享将使用的开源组件和实现告诉大家。有些同学还是不太明白,我答应后面写一篇博客来的。前几个月一直focus在网站的一些新功能上和帮忙解决一些定制问题,今天才开始动手写这篇博客来分享我的实现思路。
在本文中我将以本网站标志性的 Particleground粒子动画(github) 作为实例进行讲解,如何进行实现。先贴出 Particleground官方demo (如下图),让大家对粒子动画有个直观的了解。这里也非常感谢Horia Dragomir贡献了这个非常震撼的HTML5 Canvas动画。
在融合HTML5 Canvas动画的过程中,我并不想让HTML5 Canvas动画占用网页的版面,而是作为背景动画。正如你所看到的,官方的demo已经给出了这样的例子,tiomg.org的登录页面也是这么去实现。canvas作为背景层进行动画绘制,内容文字层悬浮在canvas上面。简化的代码是这样:
官方demo html截图:
到这里Canvas全背景动画问题已经顺利的解决了。但是在开发 tiomg.org 网站的时候,我有了一个更有趣的想法,我希望Canvas背景动画不是占满整个页面的背景,而是页面的一块区域,高度是由子元素来决定,并且完全兼容bootstrap响应式设计。就像是我们常用的CSS背景图片:background-image: url(bgimage.gif);,一般我们给父元素添加background-image,子元素(透明)撑开并决定父元素的大小。
HTML5 标签用于作为绘制图像的容器(通常是 JavaScript),并不能像图片那样作为其它HTML标签的背景,只能考虑层浮动来实现。如何“悬浮”,是想让一个层叠加在另一个层上?我们可以利用相对定位和绝对定位来实现。例如: 你在父元素上设置position:relative; 在子元素上设置position:absolute;,这样子元素就可以”悬浮”在父元素上面了。最重要的是,我还设置了一个position:relative;的子元素使其浮动在canvas上,撑开并决定父元素的大小。
这里贴出HTML简化代码:
浮动在canvas上的文字/内容
因为不能运行js代码,我录制了本地网页的gif动图代替实际效果。如果想自己本地看实际效果,你可以点击 实际效果展示及源码下载。