84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
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页面,加油吧。
并不是什么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页面,加油吧。