84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
http://zwj360.im20.com.cn/pc.html页面需要用手机扫二维码观看。1.想知道做一个这样的HTML5页面需要了解哪些技术点。2.它的事件侦听是怎么实现的。3.3D展示的效果是什么插件做的吗？4.想学习这类形的媒体HTML5的页面，有什么好的技术平台吗？
业精于勤，荒于嬉;行成于思，毁于随。
并不是什么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) },
这种用webgl可以做，webgl可以做3D的
你可以了解一下css3,关于动画的属性，这是最基础的，css3教程的网站到处都是，百度一搜就有了
用Canvas就行，后面的3d是一个球形全景，搜一下有相关jquery框架的。
例如这个：https://segmentfault.com/a/1190000005792628
确实很厉害，不得不佩服。
做出这种h5，主要在于想法吧，还有动画的衔接。其实技术就是一些css3动画的灵活运用，很厉害。
3d旋转与缩放以及3d位移结合起来使用的。想法很棒，艺术品！
同学，看了你的问题我想起了两年前的我，那时候我也是看了一个h5页面，觉得这他妈酷炫的不行，我一定要自己写一个出来。然而我那时候并不知道去各种技术论坛问我需要学什么，怎么做。你能来这里问说明你比我聪明多了:)如果你想写这种很酷炫的页面，你就必须先去学习最基础的知识：html+css。这一部分可以通过w3cschool、菜鸟联盟、慕课网等等网站去学习，不断练习，直到你觉得你写的足够好。接着就需要学习JavaScript了，推荐你去啃《JavaScript高级程序设计》与《JavaScript语言精粹》这两本书，啃完书就去把你之前写过的静态页面改成动态页面，之后的路你自己会有方向的，在学习的过程中多去看看技术论坛，你会发现前端里酷炫的不只是h5页面，加油吧。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
并不是什么webgl，只是很灵活运用了CSS3动画而已
用chrome工具看一下就知道，监听全局touch事件，然后计算触摸距离，主要用CSS动画transform: scale3d来控制，截取部分代码，剩下自己慢慢分析吧
这种用webgl可以做，webgl可以做3D的
你可以了解一下css3,关于动画的属性，这是最基础的，css3教程的网站到处都是，百度一搜就有了
用Canvas就行，后面的3d是一个球形全景，搜一下有相关jquery框架的。
例如这个：https://segmentfault.com/a/1190000005792628
确实很厉害，不得不佩服。
做出这种h5，主要在于想法吧，还有动画的衔接。其实技术就是一些css3动画的灵活运用，很厉害。
3d旋转与缩放以及3d位移结合起来使用的。想法很棒，艺术品！
同学，看了你的问题我想起了两年前的我，那时候我也是看了一个h5页面，觉得这他妈酷炫的不行，我一定要自己写一个出来。
然而我那时候并不知道去各种技术论坛问我需要学什么，怎么做。你能来这里问说明你比我聪明多了:)
如果你想写这种很酷炫的页面，你就必须先去学习最基础的知识：html+css。这一部分可以通过w3cschool、菜鸟联盟、慕课网等等网站去学习，不断练习，直到你觉得你写的足够好。
接着就需要学习JavaScript了，推荐你去啃《JavaScript高级程序设计》与《JavaScript语言精粹》这两本书，啃完书就去把你之前写过的静态页面改成动态页面，之后的路你自己会有方向的，
在学习的过程中多去看看技术论坛，你会发现前端里酷炫的不只是h5页面，加油吧。