广汽三菱X网易新闻：爱的三行情画

2019-09-17 H5案例分享 H5案例分享

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

识别图中二维码

爱的三行情画-查阅二维码

完整欣赏此案例大约需要40秒

案例：爱的三行情画

品牌：广汽三菱X网易新闻

技术实现： jQuery

亮点：

中秋佳节之际，广汽三菱联合网易新闻推出的，通过连接给出的点绘制三角形，生成祝福海报的作品，最后还可以登录“广汽三菱感恩三周年”页面了解“寻找最家拍档”的活动。

加载界面是一辆汽车迅速驶过画面，进入作品后屏幕上有不规则排列的五个点，根据文字提示滑动屏幕连接任意三个点，绘制三角形，不同三角形会引出各自的对应海报，然后三角形消失，三行的海报解说语出现，用户可保存海报，或点击“再画一次”重新绘制，也可以点击“爱意不止于此”登陆三菱三周年“寻找最家拍档”活动页面。

三角形引出的海报，画面元素是逐渐出现的，先是背景，然后是以“家”为主题的主图，然后是周边景物，最后是解说语，画色偏黄，烘托家庭及家人的温馨情感，也能突出主图中的红色三菱车，主图以“爱人”“家人”为主，突出“家”的主题，解说语是三行，语言中都有“3”的字眼或谐音，响应出品方的名称“三”菱。

随着用户的绘制，屏幕会出现红色线条代表三角形的边，很显眼，三角形的三个点可以任意选择，在海报界面可以直接返回重新绘制。

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

标签