html5 bbs网站,分享一个优秀HTML5网站的开发思路

news/2024/5/10 20:34:33/文章来源:https://blog.csdn.net/weixin_28912017/article/details/118322090

由于网站开发的工作原因，最近一直在学习HTML5语言。没事的时候，就喜欢到处搜罗优秀的网站来看，甚至调出它的源码来研究。几个月来，个人学到了很多，在这里也想和大家分享一下自己研究过的网站，并且会给大家分析一下，那些比较炫的网页效果是如何实现的。

在我所接触的网站当中，有一个叫“月熊志”的HTML5网站是比较有特色的网站。这是一个有别于普通概念的网站，它采用最新的WEBGL技术实现交互3D、通过HTML5和CSS3实现很多酷炫的效果。对于传统的网站来讲，这是一个神奇的网站！你在浏览整个体验的过程当中，就像翻阅一本杂志一样轻松，我把这个网站开发背后的技术精华罗列出来，和大家分享讨论！

网站中的翻页依靠了CSSTransitions和CSSTransforms，但这又不是一本传统的电子杂志，在杂志中加入了非常丰富的3D元素、高清图、视频和信息交互方式，并且可以触控流畅体验。

thread-3107424-1-1.html

现在触控设备越来越多，如果大家使用触控设备浏览网站的话就会感觉到网站同样对触控操作有着很好的支持，为了响应触控，开发团队在开发中使用了Hammer.js，这个大小仅为3KB的JS库，不仅支持常见的鼠标事件，还支持微软自Windows8和IE10以来引入的PointerAPI，PointerAPI封装了来自触摸、笔、鼠标的输入，能够对用户的触控操作进行统一的捕获和处理，不论用户使用什么样的输入硬件，都能很好的工作。这样可以更容易的去处理例如Tap，Swipe，Drag这些触控的操作，满足来自触控设备用户的流畅体验。另外在网站中很多内容也专门制作了丰富的触控交互场景，需要用户进行一些触控的操作，了解更多的内容。

以下是代码示例：

//先要对监听的DOM进行一些初始化

varhammer=newHammer(document.getElementById("container"));

//然后加入相应的回调函数即可

hammer.οndragstart=function(ev){};//开始拖动

hammer.οndrag=function(ev){};//拖动中

hammer.οndragend=function(ev){};//拖动结束

hammer.onswipe=function(ev){};//滑动

hammer.ontap=function(ev){};//单击

hammer.ondoubletap=function(ev){};//双击

hammer.onhold=function(ev){};//长按

hammer.ontransformstart=function(ev){};//双指收张开始

hammer.ontransform=function(ev){};//双指收张中

hammer.ontransformend=function(ev){};//双指收张结束

hammer.onrelease=function(ev){};//手指离开屏幕

在网站的第一部分使用3D的方式把Jasper栩栩如生的呈现出来，大家可以和他进行交互，并且Jasper也会有非常丰富的动作。开发团队希望构建出的3D的场景可以把月熊生长的环境以及氛围更好的渲染出来，为了更好的展示这些体验，通过WebGL把Jasper搬到浏览器上，让大家了解这种充满情感的动物。加上一些与Jasper的交互，让我们能沉浸其中，并且了解月熊的一些特点。

thread-3107424-1-1.html

通过Blender这个3D建模软件构建出了月熊的形象，以及他周围自然亲近的场景，然后结合three.js这个JavaScript3D引擎，使得我们可以在浏览器中呈现这些模型和动画。由于从Blender中导出的这些3D模型的文件体积都比较大，通过网络去传输用户就需要花费很长的时间去加载，为了保证更为流畅的体验，不得不深入研究Blender以及three.js，来想办法去减小文件的体积，以及在浏览器上的响应速度，得益于IE11的硬件加速以及WebGL的高效，可以给我们带来可以在浏览器上运行场景丰富，动画流畅的3D体验。

以下是与WebGL相关的代码示例：

loader.load("models/mesh.js",function(geometry,materials){

//创建模型对象

varmesh=newTHREE.MorphAnimMesh(geometry,newTHREE.MeshFaceMaterial(materials));

//设置动画区间

mesh.mirroredLoop=true;

mesh.setFrameRange(0,290);

mesh.duration=290*24/1000;

//设置位置和大小

mesh.position.z=2000;

mesh.position.y=-1500;

mesh.scale.x=mesh.scale.y=mesh.scale.z=500;