介绍 Introduction

这是一个利用 canvas 技术的互动相册,其中共有 12 组照片。用手涂抹旧照片会显示出新照片,此外还有可能触发一些“信息点”提示。

You can see this as an interactive album with canvas technology,

该页面上线后,通过校友的微信朋友圈自发传播,获得近 5000 次点击,完整体验次数达 1000 余次,留言 72 条。

网页地址 See in action

https://seethediff.cn/fjzs2017/

 

技术特性 Technical Features

自行优化的 canvas 操作,利用与浏览器同步绘制等技巧,触摸画图在 40 - 50 fps 运行

以节省流量为本,JavaScript 只使用现代浏览器支持的接口,不使用大型的程序库,首屏总流量 65KB(之后只加载图片素材)

基于又拍云 CDN 的实时切图、转换图片格式,大大降低对流量的消耗(在支持 WebP 的手机浏览器上包含若干信息点放大的 24 张图片总花费流量约 5MB)

完整的响应式设计,利用 JS 与 CSS 混合排版,在所有尺寸、所有朝向的屏幕上均尽量保证最佳体验,且适配高分屏等需要提高图片分辨率的情况

对打印样式进行优化,用户可直接打印保存屏幕创作成果

对键盘操作进行优化,主要操作可以全程使用键盘进行,且不需使用 Tab 键

设想 Future

网页中的组件未来可以复用,用于制作其他网页。网页也可在类似展览室的触摸屏上,实现互动。

网页的互动元素仍比较多,如要让更多的人介绍,可能需要进一步简化主线的互动操作。此外在传播初期,由于互动操作与 iOS 系统的网页退出操作有冲突,使得部分用户的使用体验较差,这一糟糕的印象可能已经难以挽回。

这一网页目前对内链处理还不够好,应当增加跳转到具体某一组图片的地址。

更多文章 More Blogs (Chinese only)

发表评论

电子邮件地址不会被公开。 必填项已用*标注