网易新闻 X 北京现代：2017母亲节-时光流转

2017-05-16 H5案例分享 H5案例分享

案例：2017母亲节-时光流转

出品：网易新闻 X 北京现代

亮点：

策划上，母亲节类，① 加载结束，孩子和妈妈一起出现在画面中，左右滑动去看看那些岁月留下的痕迹；② 向左滑动，回忆过去，依次展现了孩子毕业、远行、生病、出生那些岁月中母亲对孩子浓浓的疼爱；③ 向右滑动，展望未来，母亲关心孩子工作、婚姻，也希望孩子能回去看看她，有了小孩子后，母亲帮忙带，小孩子大了，母亲却渐渐老去；④ 种种这些，都表现了母爱的伟大无私，而后自然而然地引出北京现代温馨提示，2017年母亲节，向母亲说声妈妈，我爱你！
设计上，手绘风格，采用棕黄色作为主色调，里面的人物场景采用手绘漫画形式，增加了趣味性，动画出现的方式多采用淡入淡出这样比较柔和的方式，再配上比较舒缓的背景音乐，很抒情。
技术上，左右滑动看过去、未来，孩子与母亲的相处场景采用的是JS滑动组件Swiper。

技术实现： Swiper（JS滑动组件）

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

2017母亲节-时光流转-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签