这是一个重点跑偏但是有趣的项目。
因为知乎不能发动图所以附上链接:
之前撸了一个个人网站, 为了激励自己多写一些新项目 。由于坚持不用流行的 CSS 框架,自己又是个设计苦手,就打算设计的简单点儿。嗯,想想,就来个左右双栏吧,左边固定住放点儿名字信息链接什么的,右边儿放上一张张帅气的项目截图,加上可点击的链接。 以后撸出了新项目就往里加 。颜色什么的嘛,偷个懒用单色吧,改改透明度来表示不同的层级就好。
然后噼里啪啦敲键盘,撸出来了,长这样儿:
嗯。感觉还看得过去。鼓掌 。
又是单色留白又这么多,看起来 好单调 啊!
怎么办,已经懒得改设计了啊!
---
某天我突然灵机一动,诶要不我给左边的侧边栏背景加个动画,动态内容比较吸引眼球,大家就不会注意到右边这么白了【骗自己。
说整就整!
先写了个雪花飘落的效果,实现倒是挺容易的,y 轴速度一定,x 轴加速度随机变换一下。
诶不错不错,鼓掌 。
---
要不我再多做几个侧边栏动画,每次打开页面的时候随机播放一个,这样不就没有这么无聊了嘛!
后来做成了点右边的 Logo【对就是上图那个条纹正方形框框】也能轮换。
说整就整!
这次多花了一点儿时间写了个俄罗斯方块,又写了个简单的 AI 让它自己玩儿免得一会儿就死掉了。
诶不错不错,鼓掌 。
---
诶嘛然后就一发不可收拾了,正经的项目不做,经常没事儿就想着要写新的侧边栏动画,跟着了魔似的莫名有动力。
后面又陆陆续续写了三个,
一个 Game of Life 的实现,跑着一个 ,周而复始,非常魔性。
【我特别喜欢 Game of Life,logo 就是取材自其中一个 spaceship
一个二维随机游走,放一会儿就能跑出来类似【打了马赛克的】星云的效果,是不是有种科幻大片儿的感觉!
还有一个 Perlin noise,效果太鬼畜被我注释了,默哀三秒钟。
诶不错不错,鼓掌 。
---
P.S. 年前回顾个站有感
P.P.S. 左上角那个按钮其实是初期我不知道用什么颜色比较好就写了一个随机换色的按钮,帮助我挑颜色,后来发现诶嘛真好玩儿我戳戳戳戳。。。。
来源: http://www.tuicool.com/articles/aQvEnaZ