javascript - 这种H5 页面涉及到哪些技术点，比如3D展示，手机事件侦听，从什么途径可以了解这相关的技术。

Question

http://zwj360.im20.com.cn/pc.html
页面需要用手机扫二维码观看。
1.想知道做一个这样的HTML5页面需要了解哪些技术点。
2.它的事件侦听是怎么实现的。
3.3D展示的效果是什么插件做的吗？
4.想学习这类形的媒体HTML5的页面，有什么好的技术平台吗？

Answer 1

并不是什么webgl，只是很灵活运用了CSS3动画而已
用chrome工具看一下就知道，监听全局touch事件，然后计算触摸距离，主要用CSS动画transform: scale3d来控制，截取部分代码，剩下自己慢慢分析吧

init: function(t) {
                    this.stage = t,
                    this.onTouchStart = this.onTouchStart.bind(this),
                    this.onTouchMove = this.onTouchMove.bind(this),
                    this.onTouchEnd = this.onTouchEnd.bind(this),
                    this.stage.on("touchstart", this.onTouchStart)
                },
        onTouchStart: function(t) {
                this.firstDir = "",
                t = t.changedTouches[0],
                this.originTouchPos.x = this.oldTouchPos.x = this.newTouchPos.x = t.clientX,
                this.originTouchPos.y = this.oldTouchPos.y = this.newTouchPos.y = t.clientY,
                this.originTime = this.oldTime = this.newTime = Date.now(),
                this.dx = this.dy = this.ax = this.ay = 0,
                this.stage.on("touchmove", this.onTouchMove),
                this.stage.on("touchend", this.onTouchEnd),
                this.trigger(this.START)
            },
            onTouchMove: function(t) {
                return t = t.changedTouches[0],
                this.newTouchPos.x = t.clientX,
                this.newTouchPos.y = t.clientY,
                this.newTime = Date.now(),
                this.checkGesture(),
                this.oldTouchPos.x = this.newTouchPos.x,
                this.oldTouchPos.y = this.newTouchPos.y,
                this.oldTime = this.newTime,
                !1
            },
            onTouchEnd: function() {
                this.newTime = Date.now();
                var t = (this.newTime - this.oldTime) / 1e3;
                this.trigger(this.END, {
                    dx: this.dx,
                    dy: this.dy,
                    ax: 2 * this.time > t ? this.ax : 0,
                    ay: 2 * this.time > t ? this.ay : 0,
                    dir: this.firstDir
                }),
                this.stage.off("touchmove", this.onTouchMove),
                this.stage.off("touchend", this.onTouchEnd)
            },

Answer 2

这种用webgl可以做，webgl可以做3D的

Answer 3

你可以了解一下css3,关于动画的属性，这是最基础的，css3教程的网站到处都是，百度一搜就有了

Answer 4

用Canvas就行，后面的3d是一个球形全景，搜一下有相关jquery框架的。

例如这个：https://segmentfault.com/a/1190000005792628

Answer 5

确实很厉害，不得不佩服。

做出这种h5，主要在于想法吧，还有动画的衔接。其实技术就是一些css3动画的灵活运用，很厉害。

3d旋转与缩放以及3d位移结合起来使用的。想法很棒，艺术品！

Answer 6

同学，看了你的问题我想起了两年前的我，那时候我也是看了一个h5页面，觉得这他妈酷炫的不行，我一定要自己写一个出来。
然而我那时候并不知道去各种技术论坛问我需要学什么，怎么做。你能来这里问说明你比我聪明多了:)
如果你想写这种很酷炫的页面，你就必须先去学习最基础的知识：html+css。这一部分可以通过w3cschool、菜鸟联盟、慕课网等等网站去学习，不断练习，直到你觉得你写的足够好。
接着就需要学习JavaScript了，推荐你去啃《JavaScript高级程序设计》与《JavaScript语言精粹》这两本书，啃完书就去把你之前写过的静态页面改成动态页面，之后的路你自己会有方向的，
在学习的过程中多去看看技术论坛，你会发现前端里酷炫的不只是h5页面，加油吧。