荷小星的青春纪念册：一个长长的青春纪念册

2017-08-03 H5案例分享 H5案例分享

案例：一个长长的青春纪念册

出品：荷小星的青春纪念册

亮点：

策划上，此h5页面是一个由长图和一些动画组成的h5页面，是一个用来缅怀记忆的青春纪念册h5页面。在这个h5上，以初进大学为开始，以大学毕业为结尾，整个大学过程便构成了整个青春纪念册。开始的界面是一个绿色大树，上面有一段触动用户心灵的文字“还记得毕业那个夏天吗？”让每一位用户情不自禁的有了继续观看下去的冲动。接下来描述的是大学的整个过程，有初进校园，有宿舍夜谈，有那个难忘的“她”或“她”，有热血的篮球，也有不忍分离的“毕业”，整个h5过程如时光穿梭机一般，将每位用户内心的记忆一点儿一点儿的挖掘了出来。
设计上，在这个h5页面上，以白色和浅色为主要背景色，给人一种小清新的感觉，配以小清新和感伤的文字，更符合这个以回忆为主题的青春纪念册。另外一个设计的亮点是，动画和长图相结合的方式，通过用户每一次的触摸换屏，每一次插入适配文字的动画效果，更能让每一位用户心灵受到碰撞，去回忆自己初进校园，到校园毕业的过程。每一位用户都拥有属于自己的青春纪念册。
技术上，这支H5主要是jquery+Css3（transform）+canvas技术。

技术实现： jquery+Css3（transform）+canvas

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

识别图中二维码

一个长长的青春纪念册-查阅二维码

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

标签