HTML5案例|如何可视化制作六一儿童节前端页面

六一儿童节又快到了，不知道各位小伙伴们准备好如何借势营销了嘛？

在准备制作之前，可以看看意派Epub360H5平台上这些H5案例，希望可以给你带来一些灵感和启发~

作品一

出品：欢庆六一｜我和祖国一起成长

风格：手绘漫画

类型：横屏H5

技术解析：

实现方式一：长按控制画面移动。主要技术使用了一个触发行为“设置元素属性的位置移动”，可移动的画面是一个layer容器，layer容器内放多个不同的元素，长按按钮，控制layer容器整体移动。

实现方式二：长按控制画面的直线运动。仍是借助盛放多个元素的layer容器，给layer容器加直线运动，长按按钮，控制layer容器的直线运动播放、暂停、继续播放。

相关教程：

《设置元素属性——横、竖长图的自动滚动》

创意策划：

通过中国女排夺冠，香港回归，08年奥运会等几个场景，儿童在各个场景间玩乐、参观场馆、学习、演出等，体现了不同国家时代背景下，儿童们拥有的成长环境。穿越式场景呈现不同的时代标志性事件，并可选择在任意时代事件下生成海报，整个场景凸显了我和祖国一起成长的主题，结构清晰，主题明确。

作品二

《公益儿童节丨给孩子最好的礼物》

风格：手绘漫画

技术解析：

序列帧。开头几个效果需要在AE等视频软件中完成，如开头的人物线条绘制效果，蛋糕蜡烛燃烧效果等，制作好动画后导出序列帧，并处理好文件较大的图片，上传到意派编辑器进行设置。

相关教程：

《序列帧/ImageSequence》

《动画系列教程》

创意策划：

据统计，中国目前有超过1亿的留守儿童，大部分的儿童因长期缺乏父母关爱及陪伴而造成一些心理缺陷，比如自卑、叛逆、极度缺乏安全感、早熟以及感情淡漠等心理问题，严重的还有自杀和走上犯罪道路。

许多父母为了生活不得不离开自己的孩子，一年中与孩子团聚的时间屈指可数，父母长期不在孩子身边，个别受他人欺负的孩子，造成的心灵创伤我们是无法估计的，我们不应该让留守儿童成为这个时代的牺牲者，他们是祖国的花朵，都应无忧无虑健康成长，希望通过本次公益儿童节H5让社会各界人士关爱留守儿童，能够给予他们的一定帮助。

芷言文化传媒每年会出品一些公益性质H5，像《我的爸爸是个骗子》还有本次《公益儿童节丨给孩子最好的礼物》，用作品去宣扬公益精神，为社会公益慈善出一份力量。

作品三

《愿今后的你，都能比今天的糖果更甜》

风格：插画

技术解析：

大部分页面元素的动态效果是由动画完成的，节奏比较轻快。个别效果如彩虹出现的效果，需要在AE等视频制作软件中完成，导出序列帧图片，用意派的序列帧组件上传并设置。

相关教程：

《序列帧/ImageSequence》

《动画系列教程》

本期儿童节H5案例就介绍到这里，其他更多案例可以到意派Epub360 H5平台上寻找哦~

HTML5案例|如何可视化制作六一儿童节前端页面相关推荐

HTML实战案例2：制作模拟考试试卷页面
实战案例2:制作模拟考试试卷页面一.完整的页面效果图二.文本素材 HTML在线考试试题 1.HTML中,换行使用的标签是(). A.<br /> B.<p> C.< ...
六一活动页面html,HTML5教程|如何制作六一儿童节答题测试H5页面？
叮咚,六一儿童节又快到了,不知道各位小伙伴们准备好如何用H5页面这种方式借势营销了嘛?本期我们使用的是意派Epub360H5编辑器,希望本期教程可以给你带来一些灵感和启发~ 工具/原料联网的电脑一台 ...
Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
[Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏
本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...
[Mugeda HTML5技术教程之14]案例分析：制作网页游戏
本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...
10. 爬虫训练场，分页爬虫案例前端页面制作
本篇博客重点在分页逻辑与前端页面渲染实现,如果不是顺序阅读过来,可以先查看上一篇博客 <9. 爬虫训练场,分页爬虫案例设计 Demo,打通 Python Flask 和 MySQL> 文章 ...
【游戏开发创新】Unity+人工智能，让小朋友的画成真，六一儿童节一起来画猫猫吧（Unity | 人工智能 | 绘图 | 爬虫 | 猫妖）
文章目录一.前言二.一起来画猫猫三.爬虫,无穷只猫四.猫猫作品展五.Unity制作讲解 1.界面素材 2.UGUI制作界面 3.分辨率适配 4.如何检测鼠标事件 5.世界坐标转局部坐标 6. ...
如何挑选数据可视化框架及平台 - 前端篇
数据可视化是个很火的领域,如果在 Github 上搜索 chart 会发现有 7.6w 个结果,大量看起来功能类似的图表库,如何在这么多项目中选择适合自己的?因为做 BI 产品 Sugar 的缘故,我 ...

HTML5案例|如何可视化制作六一儿童节前端页面

作品一

作品二

HTML5案例|如何可视化制作六一儿童节前端页面相关推荐

最新文章

热门文章