简年6:H5创意 | 我把新春的祝福藏在雪花里带给你

又到了一年一度的新春佳节,是不是有满满的祝福想要送出呢?可否想过,把新年的祝福藏在雪花里,传递下去。

图中文字:新


图中文字:年


图中文字:快


图中文字:乐


这个创意来源于贴窗花的传统新年习俗,从窗花联想到雪花,又想起之前网上流传的姓氏雪花图片(如下图),图片本身并没有太多的技术含量,只有略懂一点photoshop的人,都应该知道这只需要经过简单的复制图层并做旋转变换便可实现这种效果。可是对于对ps不是很了解的大众来说,这似乎并不是一件容易的事情。我们为什么不可以通过h5的形式,让每一个普通人都能轻松地把自己想要的文字做成雪花效果?


网上流传的姓氏雪花图

小学生都知道雪花有六瓣,既然要做就做得更像一些,通过对图片旋转中心点稍作改变,便实现了只要复制五次也可达到的雪花效果。

在h5的开端,我的想法是给用户展示一下文字雪花的美丽,以激发用户的制作兴趣。于是便想到了字从天空中缓缓飘下,并中途转换成雪花的创意。事实证明这是一个大坑,这又是文字下落又是雪花出现(每片雪花由六个文字组成,需要依次设置其出现动画),动画制作简直要把我逼疯。最重要的是,当我终于完成了动画把h5放在手机上播放,这个动画居然因为太卡而不正常显示,悲伤。

第一页


看出来了吗?最上方的五片雪花是我的简书ID哦

开篇找到了一张雪花的照片作为背景图,在雪花动画播放结束后更换的新背景图,是根据之前图片做模糊处理的效果,以后的页面沿用此动画,以达成简介统一的设计风格。

第二页

用户输入文字后,便进入了颜色选择环节。设计最初的想法是只提供充满年味,符合传统对窗花认知的红色,雪花的白色以及简洁的黑色。但看到了第一页飘下的雪花,我觉得不一定非要做出雪花,也可以是普通的花朵呀,于是又添加了粉色、紫色、橙色等丰富的色彩。

第三页

接下来便是生成雪花,选择背景图案的环节。这一环节共有8页,每一种颜色对应一个界面,不同的界面,根据雪花的颜色,提供的背景图案略有不同,用户可根据喜好选择,同时用户也可以自己上传喜好的图片作为背景。不过由于平台的支持问题,上传的文件如果比较大可能会出现上传时间很长或者是上传失败的情况。

图中的雪花,本为6个空白文本框。用户在上一页选择颜色时,即执行设定文字事件,将之前在输入框中输入的文字,设定为文本框中的文字。

背景选择

当用户选好了背景图,单击确定,即执行打印画布事件,将上图中白色背景及其上方的文本合并为一张图片。因为画布打印需要一定的时间,所以先跳转至加载页面,持续时间为5秒。

加载页面

五秒后,自动跳转下一页,长按图片即可保存。也可以选择再来一张,将跳转至输入框页面重现开始。

最终效果产生

贯穿h5的背景音乐是一曲悠扬的纯音乐,用户可通过右上角的喇叭按钮决定开启或关闭音乐。


H5 从设计到制作,陆陆续续花了好几天的时间,作为一个文科生,是真的被这乱七八糟各种事件各种问题搞得晕头转向。其间不明原因地,雪花总是在第一次生成时加载不出来,第一次打印画布也没有任何反应,尝试了各种解决方式都无济于事,最终问了h5平台客服才弄明白,是预加载页面数设置的问题。

没有利益,没有任何目的,花时间做这个,只是因为我喜欢而已,喜欢通过技术方式实现自己的创意。除了背景图案个人无法完成,里面的每个部分都是自己一个人做出来。原本打算在屋子加入一些春节元素,结果做着做着就以一张蓝色背景贯穿始终,除了一个“年味红”颜色和一张窗前小女孩的照片(从着装和外貌来看,那女孩过的应该是圣诞节),再也体现不出春节的气氛。也许是设计师随心吧,本不曾感受到年味的气息,便不想在作品中表现出来。

最后,附上h5链接,原创作品,禁止任何形式的盗用、转载和商用。为了图片缩放功能能够正常使用,请在手机端进行访问。《我藏了一个文字在雪花里》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,717评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,501评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,311评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,417评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,500评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,538评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,557评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,310评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,759评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,065评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,233评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,909评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,548评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,172评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,420评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,103评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,098评论 2 352

推荐阅读更多精彩内容